usage.tsx

import * as React from "react";
import useBoundingRef from "./useBoundingRect";

function App() {
    const elementRef = React.useRef<HTMLDivElement | null>(null);
    const bounds = useBoundingRef(elementRef);

    return (
        <div ref={elementRef}>
            Get my bounds!
        </div>
    );
}

withBoundingRect.ts

import * as React from "react";

interface Bounds {
    offsetTop: number;
    offsetLeft: number;
    offsetWidth: number;
    offsetHeight: number;
    element: HTMLElement;
}

export default function withBoundingRect(elRef: React.RefObject<HTMLElement | null>) {
    const [bounds, setBounds] = React.useState<Bounds | null>(null);
    const lastEl = React.useRef<HTMLElement | null>(elRef.current);
    React.useEffect(() => {
        const element = elRef.current;
        if (element) {
            if (element !== lastEl.current) {
                setBounds({
                    offsetTop: element.offsetTop,
                    offsetLeft: element.offsetLeft,
                    offsetWidth: element.offsetWidth,
                    offsetHeight: element.offsetHeight,
                    element,
                });
            }
        } else if (bounds !== null) {
            setBounds(null);
        }
        lastEl.current = element;
    });
    return bounds;
}