		@@ -6,23 +6,31 @@ import type { MutableRefObject } from "react"

		type Scale2d = {
		width: number
		height: number
		}

		export const useSize = (
		target: MutableRefObject<HTMLElement \| null>
		): DOMRect => {
		const [size, setSize] = useState<DOMRect>({
		x: 0,
		y: 0,
		): Scale2d => {
		const [size, setSize] = useState<Scale2d>({
		width: 0,
		height: 0,
		top: 0,
		right: 0,
		bottom: 0,
		left: 0,
		toJSON: () => ({}),
		})

		useLayoutEffect(() => {
		if (target?.current) setSize(target.current.getBoundingClientRect())
		if (target?.current) {
		const boundingRect = target.current.getBoundingClientRect()
		console.log(boundingRect)
		setSize(boundingRect)
		}
		}, [target])

		useResizeObserver(target, (entry) => setSize(entry.contentRect))
		useResizeObserver(target, (entry) => {
		console.log(entry.borderBoxSize)
		setSize({
		height: entry.borderBoxSize[0].blockSize,
		width: entry.borderBoxSize[0].inlineSize,
		})
		})
		return size
		}

src/index.ts

		@@ -24,2 +24,3 @@ import type { FC, ForwardRefExoticComponent } from "react"
		const size = useSize(nodeRef)
		console.log(pathId, size)
		const d = pathfinder(size.height, size.width, cornerSize)
		@@ -26,0 +27,0 @@ return createElement(

src/utils/svg.ts

		@@ -123,4 +123,2 @@ import { interpolate } from "./interpolate"
		switch (corners.length) {
		case 0:
		throw new Error(`No corners provided`)
		case 1:
		@@ -145,4 +143,2 @@ const corner = corners[0] ?? straight
		])
		case 3:
		throw new Error(`pass 1, 2, or 4 corners`)
		case 4:
		@@ -161,5 +157,5 @@ const cornerA = corners[0] ?? straight
		default:
		throw new Error(`pass 2 or 4 corners`)
		throw new Error(`pass 1, 2, or 4 corners`)
		}
		}
		/* eslint-enable no-case-declarations */

corners - npm Package Compare versions

New alerts