hook for calculating a component's bounding rect

useComponentRect.js

import React, { useState, useEffect, useLayoutEffect, useContext } from 'react';
import debounce from "debounce";

function useComponentRect(containerRef, debounceTime = 100) {
  const [rect, setRect] = useState();

  const calculateRect = debounce(() => {
    if (containerRef.current){
      const rect = containerRef.current.getBoundingClientRect();
      setRect(rect);
    }
  }, debounceTime);

  // calculate on first render
  // once all web fonts have all loaded
  useLayoutEffect(() => {
    document.fonts.ready.then(() => {
      calculateRect();
    });
  }, []);

  useEffect(() => {
    window.addEventListener("resize", calculateRect);
    return () => {
      window.removeEventListener("resize", calculateRect);
    }
  }, []);
  
  return rect;
}

export default useComponentRect;