1.0.8 • Published 6 months ago
borderline v1.0.8
Borderline
A React component for drawing borders around groups of elements
Inverted corners are hard. Have you ever wanted to do this?
Good Luck! 😅
Until now...
Installation
Via NPM:
npm install borderlineUsage
import Borderline from 'borderline'
function App() {
return (
<Borderline
pathStroke="black"
pathStrokeWidth={2}
pathFill="transparent"
cornerRadius={20}
controlRatio={0.552}
cornerSharpness={{
topRight: false,
topLeft: false,
bottomRight: false,
bottomLeft: false
}}
>
<div>One</div>
<div>Two</div>
<div>Three</div>
</Borderline>
)
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| pathStrokeWidth | number | 2 | The width of the borderline |
| pathStroke | string | "black" | The color of the borderline |
| pathFill | string | "transparent" | The color of the fill of the borderline shape |
| cornerRadius | number | 20 | The radius of the corners of the elements |
| controlRatio | number | 0.552 | The ratio of the control points for the bezier curves. The default point approximates a circle. |
| cornerSharpness | CornerSharpness | {...} | Object controlling which corners should be sharp |
CornerSharpness Object
type CornerSharpness = {
topRight?: boolean;
topLeft?: boolean;
bottomRight?: boolean;
bottomLeft?: boolean;
}Development Props
| Prop | Type | Default | Description |
|---|---|---|---|
| skipSmallLedges | boolean | false | Skip small ledges when traversing the elements |
| roundedPoints | boolean | true | Round the points to the nearest integer |
Notes
Thank you to the polygon-clipping library for doing the hard parts.