React Typescript useResponsive hook

useResponsive.tsx

import { useState, useEffect } from "react";

type ScreenSize = "sm" | "md" | "lg" | "xl" | "2xl" | "xs";
const breakpoints = {
  "2xl": 1536,
  xl: 1280,
  lg: 1024,
  md: 768,
  sm: 640,
};

const useResponsive = () => {
  const [screenSize, setScreenSize] = useState<ScreenSize>("xs");

  useEffect(() => {
    const updateScreenSize = () => {
      const width = window.innerWidth;

      if (width >= breakpoints["2xl"]) {
        setScreenSize("2xl");
      } else if (width >= breakpoints.xl) {
        setScreenSize("xl");
      } else if (width >= breakpoints.lg) {
        setScreenSize("lg");
      } else if (width >= breakpoints.md) {
        setScreenSize("md");
      } else if (width >= breakpoints.sm) {
        setScreenSize("sm");
      } else {
        setScreenSize("xs");
      }
    };

    // set initial size on load
    updateScreenSize();

    // react to resize
    window.addEventListener("resize", updateScreenSize);

    // never forget to clean up event listeners!
    return () => window.removeEventListener("resize", updateScreenSize);
  }, []);

  // Define device types based on screen size
  const isMobile = screenSize === "xs" || screenSize === "sm";
  const isTablet = screenSize === "md";
  const isDesktop =
    screenSize === "lg" || screenSize === "xl" || screenSize === "2xl";

  return {
    size: screenSize,
    isMobile,
    isTablet,
    isDesktop,
  };
};

export default useResponsive;