useResizeObserver

Hook to use Resize Observer.

See: Resize Observer API.

Demo

INFO

The component renders a textarea element with a ref that receives callback returned from useResizeObserver_ hook. There are also two button to disconnect and reconnect observer by functions returned from hook.

Hook is initialized with a callback that verifies if textarea element has a width minor or major of 100 px amd set result into state variable. The state variable value is displayed on screen.

Loading demo…

Show source code

import { useState } from "react";
import { useResizeObserver } from "../../../.."

export const UseResizeObserver = () => {
	const [state, setState] = useState(false);
	const { ref, disconnect, reconnect } = useResizeObserver<HTMLTextAreaElement>(
		(entries: ResizeObserverEntry[]) => {
			const result = entries[0].contentRect.width < 100;
			result !== state && setState(result);
		},
		{ mode: "ref" }
	);

	return <div>
		<p>{"Has width < 100 px: " + state}</p>
		<textarea ref={ref} rows={3}></textarea>
		<br/>
		<button onClick={reconnect}>Reconnect</button>
		<button onClick={disconnect}>Disconnect</button>
	</div>
}

Types

UseResizeObserverProps

• @template T - The element type observed by the {@link ResizeObserver}.

Parameters accepted by useResizeObserver.

Property	Type	Required	Description
cb	ResizeObserverCallback	✓	The {@link ResizeObserverCallback} invoked whenever the observed element's size changes. Receives the array of {@link ResizeObserverEntry} objects and the observer instance itself.
attachOptions	\| { mode: "ref"; targetRef?: never } \| { mode: "effect" \| "layout-effect"; targetRef: RefObject<T> }	✓	Controls how the target element is attached to the observer: - { mode: "ref" } — The hook returns a RefCallback to attach directly to the JSX element. The observer is connected when the ref is set. - { mode: "effect", targetRef } — The observer is connected inside a useEffect using the provided RefObject. - { mode: "layout-effect", targetRef } — The observer is connected inside a useLayoutEffect using the provided RefObject, running synchronously before the browser paints.
opts	ResizeObserverOptions		Options forwarded to the {@link ResizeObserver} observe() call. Currently supports box to select which CSS box model to observe ("content-box", "border-box", or "device-pixel-content-box"). When omitted, the observer defaults to "content-box".

UseResizeObserverResult

• @template T - The element type observed by the {@link ResizeObserver}.

Return value of useResizeObserver.

Property	Type	Required	Description
ref	RefCallback<T> \| null	✓	A React ref callback to attach to the target element. Only populated when attachOptions.mode is "ref" — null in "effect" and "layout-effect" modes where the target is provided via targetRef instead.
disconnect	() => void	✓	Disconnects the observer, stopping all resize notifications. The observer can be restarted by calling {@link UseResizeObserverResult.reconnect}.
reconnect	() => void	✓	Reconnects the observer after it has been disconnected, resuming resize notifications for the target element.