Function ResizeDetector

components/dash-core-components/src/utils/ResizeDetector.js:7–38

const DELAY = 50;

const ResizeDetector = props => {
    const {onResize, children, targets} = props;
    const ref = createRef();
    let resizeTimeout;

    const debouncedResizeHandler = useCallback(() => {
        if (resizeTimeout) {
            clearTimeout(resizeTimeout);
        }
        resizeTimeout = setTimeout(() => {
            onResize(true); // Force on resize.
        }, DELAY);
    }, [onResize]);

    const observer = useMemo(
        () => new ResizeObserver(debouncedResizeHandler),
        [onResize]
    );

    useEffect(() => {
        if (!ref.current) {
            return () => {};
        }
        targets.forEach(target => observer.observe(target.current));
        observer.observe(ref.current);
        return () => {
            observer.disconnect();
        };
    }, [ref.current]);

    return <div ref={ref}>{children}</div>;
};

ResizeDetector.propTypes = {
    onResize: PropTypes.func,