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

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

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var React = require('react');

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

exports.default = useResizeObserver;