useMatchMeadi Hooks

useMatchMedia.tsx

import { useState, useEffect } from 'react';

const useMatchMedia = (mediaQuery: string) => {
   const [isMatches, setIsMatches] = useState(
      window.matchMedia(mediaQuery).matches
   );

   useEffect(() => {
      const updateStateisMatches = (event: MediaQueryListEvent) =>
         setIsMatches(event.matches);

      const mediaQueryList = window.matchMedia(mediaQuery);
      setIsMatches(mediaQueryList.matches);
      mediaQueryList.addListener(updateStateisMatches);

      return () => mediaQueryList.removeListener(updateStateisMatches);
   }, [mediaQuery]);

   return isMatches;
};

export { useMatchMedia };