@react-hookz/web/esm/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) {
    if (enabled === void 0) { enabled = true; }
    var _a = useSafeState(null), element = _a[0], setElement = _a[1];
    var elementRef = useHookableRef(null, function (v) {
        setElement(v);
        return v;
    });
    var _b = useSafeState(), rect = _b[0], setRect = _b[1];
    var observerHandler = useRafCallback(function (entry) {
        return setRect(entry.contentRect);
    })[0];
    useResizeObserver(element, observerHandler, enabled);
    return [rect, elementRef];
}