@dnanpm/styleguide/build/es/hooks/useResizeObserver.js

DNA Styleguide repository provides the set of components and theme object used in various DNA projects.

import { useState, useRef, useCallback, useEffect } from 'react';

/**
 * Hook to get element dimensions when layout changes
 */
const ResizeObserver = typeof window !== 'undefined' && window.ResizeObserver;
const useResizeObserver = (ref) => {
    const [size, setSize] = useState({ width: 0, height: 0 });
    const resizeObserver = useRef(null);
    const onResize = useCallback(entries => {
        const { inlineSize, blockSize } = entries[0].borderBoxSize[0];
        setSize({ width: inlineSize, height: blockSize });
    }, []);
    useEffect(() => {
        if ((ref === null || ref === void 0 ? void 0 : ref.current) && ResizeObserver) {
            if (resizeObserver.current) {
                resizeObserver.current.disconnect();
            }
            resizeObserver.current = new ResizeObserver(onResize);
            if (resizeObserver.current) {
                resizeObserver.current.observe(ref.current);
            }
        }
    }, [ref, onResize]);
    useEffect(() => () => {
        if (resizeObserver.current) {
            resizeObserver.current.disconnect();
        }
    }, []);
    return { ref, width: size.width, height: size.height };
};

export { useResizeObserver as default };