Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProMeasure an element and keep its width and height up to date as it resizes, with a choice of content box or border box.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use it for container-aware layout in JavaScript: choosing how many columns fit, drawing a canvas at the right size, truncating by width or sizing a chart.
Do not use it for styling that CSS container queries can do; prefer those. For the window size use useWindowSize.
import { useResizeObserver } from "@/hooks/use-resize-observer"const { ref, width, height } = useResizeObserver<HTMLDivElement>()
<div ref={ref}>{width ?? 0} x {height ?? 0}</div>useResizeObserver<T extends Element>(options?): { ref, width, height }
| Option | Type | Default | Description |
|---|---|---|---|
box | "content-box" | "border-box" | "device-pixel-content-box" | "content-box" | Which box to measure. |
onResize | (size: { width: number; height: number }) => void | - | Called on every change, newest version used. |
width and height are undefined until the first measurement and on the server. Sizes are set only when they change, so there are no needless renders. The observer is disconnected on unmount.
A hook has no markup. Do not hide or reorder content by size in a way that changes reading order or removes information; adapt the layout, not the meaning.
The hook ships with renderHook tests (use-resize-observer.test.ts) covering its behaviour, cleanup on unmount and server-safe defaults. It is safe to render on the server.