useElementRect - a react hook that keeps the current rectangle inhabited by an element up-to-date

useElementRect.ts

import { RefObject, useEffect, useState, useRef } from 'react';

const useElementRect = <T extends HTMLElement>(): [RefObject<T>, DOMRect] => {
  const [rect, setRect] = useState<DOMRect>(new DOMRect());

  const ref = useRef<T>(null);

  useEffect(() => {
    const updateRect = () => setRect(ref?.current?.getBoundingClientRect() || new DOMRect());

    updateRect();

    const observer = new ResizeObserver(updateRect);
    ref.current && observer.observe(ref.current);

    return () => observer.disconnect();
  }, []);

  return [ref, rect];
};

export default useElementRect;