@reach/rect

Measure React elements position in the DOM

Last updated 5 years ago by chancestrickland .

MIT · Repository · Original npm · Tarball · package.json

$ npm install @reach/rect

SYNC missed versions from official npm registry.

@reach/rect

Docs | Source

Measures DOM elements (aka. bounding client rect). See also Element.getBoundingClientRect()

import { Rect, useRect } from "@reach/rect";

function Example() {
	const ref = React.useRef();
	const rect = useRect(ref);

	return (
		<div>
			<pre>{JSON.stringify(rect, null, 2)}</pre>
			<div
				ref={ref}
				contentEditable
				dangerouslySetInnerHTML={{
					__html: "Edit this to change the size!",
				}}
			/>
		</div>
	);
}