useScreenSize

useScreenSize.tsx

import { useEffect, useState } from "react";

export function useScreenSize() {
  // Local State
  const [width, setWidth] = useState<number>(1200);
  const [height, setHeight] = useState<number>(900);

  // Update the height
  function onScreenSizeChange(_event: Event) {
    setWidth(window.innerWidth);
    setHeight(window.innerHeight);
  }

  // On Mount subscribe to screen size changing
  useEffect(() => {
    window.addEventListener("resize", onScreenSizeChange);

    // Clean up
    return () => {
      window.removeEventListener("resize", onScreenSizeChange);
    };
  }, []);

  return {
    width,
    height,
  };
}