@react-hookz/web/esnext/useMeasure/useMeasure.js

React hooks done right, for browser and SSR.

import { useHookableRef, useRafCallback, useResizeObserver, useSafeState, } from '..';
/**
 * Uses ResizeObserver to track element dimensions and re-render component when they change.
 *
 * @param enabled Whether resize observer is enabled or not.
 */
export function useMeasure(enabled = true) {
    const [element, setElement] = useSafeState(null);
    const elementRef = useHookableRef(null, (v) => {
        setElement(v);
        return v;
    });
    const [rect, setRect] = useSafeState();
    const [observerHandler] = useRafCallback((entry) => setRect(entry.contentRect));
    useResizeObserver(element, observerHandler, enabled);
    return [rect, elementRef];
}