@supunlakmal/hooks/dist/hooks/user-interface-dom/useElementSize.js

A collection of reusable React hooks

import { useState, useEffect } from 'react';
import { useResizeObserver } from './useResizeObserver';
/**
 * Custom hook that observes an element's size and provides its width and height.
 *
 * @param elementRef - The ref attached to the element being observed.
 * @returns - The width and height of the element.
 */
export const useElementSize = (elementRef) => {
    const [size, setSize] = useState({
        width: 0,
        height: 0,
    });
    // Get the ResizeObserver entry for the element ref
    const entry = useResizeObserver(elementRef);
    // Update size state when ResizeObserver entry changes or the element appears
    useEffect(() => {
        if (entry) {
            setSize({
                width: entry.contentRect.width,
                height: entry.contentRect.height,
            });
        }
    }, [entry]);
    return size;
};
//# sourceMappingURL=useElementSize.js.map