react-hook-granth/src/hooks/useWindowSize.js

A collection of custom React hooks for efficient state management and UI logic.

import { useEffect, useState } from "react";

/**
 * Track the current window size.
 * @returns {{ width: number, height: number }}
 */
export default function useWindowSize() {
  const [size, setSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight,
  });

  useEffect(() => {
    const updateSize = () => {
      setSize({ width: window.innerWidth, height: window.innerHeight });
    };
    window.addEventListener("resize", updateSize);
    return () => window.removeEventListener("resize", updateSize);
  }, []);

  return size;
}