rooks/dist/esm/hooks/useBoundingclientrect.js

Essential React custom hooks ⚓ to super charge your components!

import { useState, useCallback } from "react";
import { useDidMount } from "./useDidMount";
import { useMutationObserver } from "./useMutationObserver";
/**
 * @param element HTML element whose boundingclientrect is needed
 * @returns DOMRect
 */
function getBoundingClientRect(element) {
    return element.getBoundingClientRect();
}
/**
 * useBoundingclientRect hook
 *
 * @param ref The React ref whose ClientRect is needed
 * @returns DOMRect | null
 * @see https://react-hooks.org/docs/useBoundingclientRect
 */
function useBoundingclientrect(ref) {
    var _a = useState(null), domRect = _a[0], setDomRect = _a[1];
    var update = useCallback(function () {
        setDomRect(ref.current ? getBoundingClientRect(ref.current) : null);
    }, [ref]);
    useDidMount(function () {
        update();
    });
    useMutationObserver(ref, update);
    return domRect;
}
export { useBoundingclientrect };