rooks/dist/esm/hooks/useBoundingclientrectRef.js

Essential React custom hooks ⚓ to super charge your components!

import { useState, useEffect, useCallback } from "react";
import { useForkRef } from "./useForkRef";
import { useMutationObserverRef } from "./useMutationObserverRef";
/**
 * @param element HTML element whose boundingclientrect is needed
 * @returns DOMRect
 */
function getBoundingClientRect(element) {
    return element.getBoundingClientRect();
}
/**
 * useBoundingclientrectRef hook
 * Tracks the boundingclientrect of a React Ref and fires a callback when the element's size changes.
 *
 * @returns [CallbackRef | null, DOMRect | null, () => void]
 * @see https://react-hooks.org/docs/useBoundingclientRectRef
 */
function useBoundingclientrectRef() {
    var _a = useState(null), domRect = _a[0], setDomRect = _a[1];
    var _b = useState(null), node = _b[0], setNode = _b[1];
    var update = useCallback(function () {
        setDomRect(node ? getBoundingClientRect(node) : null);
    }, [node]);
    useEffect(function () {
        update();
    }, [update]);
    var ref = useCallback(function (nodeElement) {
        setNode(nodeElement);
    }, []);
    var mutationObserverRef = useMutationObserverRef(update)[0];
    var forkedRef = useForkRef(ref, mutationObserverRef);
    return [forkedRef, domRect, update];
}
export { useBoundingclientrectRef };