corners

---

npm i corners

yarn add corners

---

Create react components with angled or smooth-rounded corners.

Features

• Use one of the preset component factories like rounded: const MyButton = rounded.button
• Make your own component factory with corners: const dogEared = corners(chamfer, null, null, null).size(40)
• CSS clip-path ensures corners are rendered as empty space
• Components may be dynamically sized: a resize observer is used to detect changes to component size and update the clip-path
• Specify the corner size when calling a factory (e.g. rounded.cornerSize(10).div)
• Support for drop shadows (e.g. corners(round).options({shadow: {...}}).div)
• Support for positioning elements outside of the target element

API

corners(...cornerFns).size(cornerSize)

import type { FC } from "react"
import corners, { chamfer } from "corners"

const upperLeftDogeared = corners(null, null, null, chamfer).size(20)

const DogearedDiv = upperLeftDogeared.div

const MyComponent: FC = () => (
  <DogEaredDiv style={{ background: "black" }}>
    Hello, World!
  </DogEaredDiv>
)

Argument	Type	Required?	Description
cornerFns	Maybe<DrawCorner>[]	Yes	1, 2, or 4 functions that specify the corners for this factory in clockwise order
cornerSize	number	Yes	Equivalent to the Npx given in css border-radius

LICENSE

MIT