@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>
	);
}