@kubit-ui-web/react-components/dist/esm/hooks/useElementBoundingClientRect/useElementBoundingClientRect.js

Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience

import React from 'react';
/**
 * Custom hook that returns the bounding client rect of a specified element.
 *
 * @param {Params} props - The hook parameters.
 * @param {React.MutableRefObject<HTMLElement | null>} props.ref - The reference to the element.
 *
 * @returns {ReturnValue} - The hook return value.
 * @returns {DOMRect | undefined} ReturnValue.measures - The bounding client rect of the element.
 */
export const useElementBoundingClientRect = (props) => {
    const [measures, setMeasures] = React.useState(undefined);
    React.useEffect(() => {
        const element = props.ref?.current;
        if (!element) {
            return () => null;
        }
        const getMeasures = () => {
            if (element) {
                const measure = element?.getBoundingClientRect();
                setMeasures(measure);
            }
        };
        getMeasures();
        window.addEventListener('resize', getMeasures);
        return () => window.removeEventListener('resize', getMeasures);
    }, [props.ref]);
    return { measures };
};
//# sourceMappingURL=useElementBoundingClientRect.js.map