Use this hook when you need to get the size of a React div every time its size changes.

useResponsiveDivSize.tsx

import { useEffect, useRef, useState } from "react";

export interface DivSize {
  width: number;
  height: number;
}

interface ResponsiveDivSizeReturn {
  divRef: React.RefObject<HTMLDivElement>;
  divSize: DivSize;
}

export function useResponsiveDivSize(): ResponsiveDivSizeReturn {
  const divRef = useRef<HTMLDivElement>(null);
  const [divSize, setDivSize] = useState({
    width: 0,
    height: 0,
  });

  useEffect(() => {
    function handleResize() {
      const div = divRef.current!;
      if (div) {
        setDivSize({
          width: div.offsetWidth,
          height: div.offsetHeight,
        });
      }
    }
    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, []);

  return { divRef, divSize };
}

Example Usage

import { useResponsiveDivSize } from "@src/hooks";

export function ExampleUsage() {
  const { divRef, divSize } = useResponsiveDivSize();

  console.log(divSize);

  return (
    <div ref={divRef}>
      <h1>Example Usage</h1>
    </div>
  );
}