Hook that listens for bounding box changes on a DOM element.

useResizeObserver.tsx

import {MutableRefObject, useEffect, useState} from 'react';

const toRect = (rect: DOMRect | undefined) => {
    const width = rect?.width || 0,
        height = rect?.height || 0,
        x = rect?.x || 0,
        y = rect?.y || 0;
    return {width, height, x, y};
};

export const useResizeObserver = (
    ref: MutableRefObject<HTMLElement | null>
) => {
    const [rect, setRect] = useState(
        toRect(ref.current?.getBoundingClientRect())
    );
    useEffect(() => {
        const ob = new ResizeObserver(() =>
            setRect(toRect(ref.current?.getBoundingClientRect()))
        );
        ob.observe(ref.current!);
        return () => ob.disconnect();
    }, [ref]);
    return rect;
};