useOnElementResize hook for React.js

use-on-element-resize.js

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

export default function useOnElementResize(didResize) {
  const ro = useRef(null);

  const ref = useCallback(
    (element) => {
      if (element) {
        if (ro.current) {
          ro.current.disconnect();
        }

        ro.current = new window.ResizeObserver((entries, observer) => {
          didResize(element);
        });
        ro.current.observe(element);
      }
    },
    [didResize]
  );

  useEffect(
    () => {
      return () => {
        ro.current.disconnect();
      };
    },
    []
  );

  return ref;
}