useResizeObserver

useResizeObserver(options?)

A hook that observes element size changes using the Resize Observer API.

Parameters

Parameter	Type	Description
options	UseResizeObserverOptions	Optional configuration object

Options

Option	Type	Default	Description
box	ResizeObserverBoxOptions	"content-box"	Box model to observe: "content-box", "border-box", or "device-pixel-content-box"
debounce	number	0	Debounce delay in milliseconds. Waits until resizing stops before updating
throttle	number	0	Throttle interval in milliseconds. Updates at most once per interval
round	(value: number) => number	Math.round	Function to round size values. Use Math.floor, Math.ceil, or custom function
enabled	boolean	true	Enable/disable observer. When false, observer disconnects and stops all updates
updateState	boolean	true	Whether to update React state. Set to false for callback-only mode
initialWidth	number	—	Initial width value for SSR or before first observation
initialHeight	number	—	Initial height value for SSR or before first observation
onResize	OnResizeCallback	—	Callback fired on every resize with entry, width, and height
onError	OnErrorCallback	—	Callback fired when ResizeObserver encounters an error

Returns UseResizeObserverReturn

Property	Type	Description
ref	(node: Element | null) => void	Callback ref to attach to the target element you want to observe
width	number | undefined	Current width of the observed element
height	number | undefined	Current height of the observed element
entry	ResizeEntry | undefined	Full resize entry data (undefined if not yet observed)
isSupported	boolean	Whether ResizeObserver API is supported in the current environment
observe	(target: Element) => void	Manually start observing a specific element
unobserve	(target: Element) => void	Stop observing a specific element
disconnect	() => void	Disconnect the observer completely

ResizeEntry

Extended resize entry with convenience properties:

Property	Type	Description
entry	ResizeObserverEntry	Original native ResizeObserverEntry from the browser API
target	Element	The observed DOM element
contentRect	DOMRectReadOnly	Content rectangle (same as contentRect from native entry)
borderBoxSize	ResizeObserverSize[]	Border box dimensions array
contentBoxSize	ResizeObserverSize[]	Content box dimensions array
devicePixelContentBoxSize	ResizeObserverSize[]	Device pixel content box dimensions (if supported)

ResizeObserverBoxOptions

type ResizeObserverBoxOptions =
  | "content-box"              // Content area only (default)
  | "border-box"               // Content + padding + border
  | "device-pixel-content-box" // Physical pixels (for canvas)

---