useMeasure

Hook to measure and track element's dimensions.

Demo

INFO

The component tracks div element dimensions and display them on screen. Try to resize div to see its current dimensions.

Loading demo…

Show source code

import { useMeasure } from "../../../.."

export const UseMeasure = () => {
	const [cbRef, state] = useMeasure<HTMLDivElement>();

	return <div style={{margin: '0 auto'}}>
		<p>Dimensions: {JSON.stringify(state)}</p>
		<br />
		<div ref={cbRef} style={{margin:'0 auto', width: 100, height: 100, overflow: 'auto', resize: 'both', border: '1px solid lightblue'}}/>
	</div>
}

Types

UseMeasureResult

• @template T - The element type being measured.

Return value of useMeasure.

Index	Type	Description
[0]	RefCallback<T> \| null	A React ref callback to attach to the target element. Wiring this ref is required for measurements to be taken — the hook observes the element via a ResizeObserver and updates the returned rect whenever its size changes. null until the element has been mounted.
[1]	DOMRectReadOnly	A read-only {@link DOMRectReadOnly} describing the current bounding box of the observed element. Updated reactively on every resize. Contains x, y, width, height, top, right, bottom, and left. Initialised to an empty DOMRectReadOnly before the element mounts.