useResizeObserver

useResizeObserver.tsx

import { useLayoutEffect, useRef } from 'react';

export function useResizeObserver<E extends HTMLElement = HTMLElement>(
    onResize: (el: E) => unknown,
) {
    const ref = useRef<E>(null);
    useLayoutEffect(() => {
        if (!ref.current) {
            return;
        }

        const resizeObserver = new ResizeObserver((entries) =>
            onResize(entries[0].target as E),
        );
        resizeObserver.observe(ref.current);
        return () => resizeObserver.disconnect();
    }, [onResize]);

    return { ref };
}