provide hook for handling screen size

useResponsive.jsx

import { useEffect, useState } from "react";
import useDebounceHook from "./useDebounceHook";

const useResponsive = () => {
  const debounce = useDebounceHook(onResizeHandler, 500, false);

  const [state, setState] = useState({
    isMobile: false,
    isTablet: false,
    isDesktop: false,
  });

  useEffect(() => {
    setUp();

    return () => {
      cleanup();
    };
  }, []);

  const setUp = () => {
    window.addEventListener("resize", debounce, false);
  };

  const cleanup = () => {
    window.removeEventListener("resize", debounce, false);
  };

  const onResizeHandler = () => {
    const isMobile = window.innerWidth < 768;
    const isTablet = window.innerWidth > 768 && window.innerWidth <= 900;
    const isDesktop = window.innerWidth > 900;

    setState({
      isMobile,
      isTablet,
      isDesktop,
    });
  };

  return state;
};

export default useResponsive;