Package Exports

react-border

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-border) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-border

React library for creating SVG border around children property.

Demo

https://codesandbox.io/s/competent-haslett-99502

Installation

npm install react-border

API

Border.propTypes = {
  children: PropTypes.node.isRequired,
  className: PropTypes.string,
  radius: PropTypes.number,
  size: PropTypes.number,
}

Border.defaultProps = {
  className: '',
  radius: 5,
  size: 4,
}

How to use it

Example 1

<Border className='example-1' radius={30} size={10}>
  <div style={{ padding: 15 }}>
    Nam eu pretium mi, nec ornare nisl
  </div>
</Border>

.example-1__in {
  stroke-dasharray: 8 2;
  stroke: #2f416d;
}

Example 2

<Border className='example-2' radius={10}>
  <div style={{ padding: 5 }}>
    Interdum et malesuada fames
  </div>
</Border>

.example-2__in {
  stroke-dasharray: 10 3;
  stroke: #ffba92;
}

Example 3

<Border className='example-3' radius={0} size={1}>
  <div style={{ padding: 3 }}>
    Vivamus lobortis mollis leo sit amet sodales
  </div>
</Border>

.example-3__in {
  stroke-dasharray: 3 8;
}

Example 4

<Border className='example-4' radius={20} size={2}>
  <div style={{ padding: 4 }}>
    Donec vehicula, est at volutpat tempor
  </div>
</Border>

.example-4__in {
  stroke: #851de0;
}