Borderline

A React component for drawing borders around groups of elements

Try the demo!

Inverted corners are hard. Have you ever wanted to do this?

Good Luck! 😅

Until now...

Installation

Via NPM:

npm install borderline

Usage

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.