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