useClientMediaQuery.md

import { useEffect, useState } from 'react';

const useClientMediaQuery = () => {
  const [device, setDevice] = useState({
    mobile: false,
    tablet: false,
    desktop: false,
  });

  useEffect(() => {
    const mediaQueryMobile = window.matchMedia('(max-width: 767px)');
    const mediaQueryTablet = window.matchMedia(
      '(min-width: 768px) and (max-width: 1019px)',
    );
    const mediaQueryDesktop = window.matchMedia('(min-width: 1020px)');

    const handleMatchChange = () => {
      setDevice({
        mobile: mediaQueryMobile.matches,
        tablet: mediaQueryTablet.matches,
        desktop: mediaQueryDesktop.matches,
      });
    };

    // Initial check
    handleMatchChange();

    // Add event listeners
    mediaQueryMobile.addEventListener('change', handleMatchChange);
    mediaQueryTablet.addEventListener('change', handleMatchChange);
    mediaQueryDesktop.addEventListener('change', handleMatchChange);

    // Clean up event listeners
    return () => {
      mediaQueryMobile.removeEventListener('change', handleMatchChange);
      mediaQueryTablet.removeEventListener('change', handleMatchChange);
      mediaQueryDesktop.removeEventListener('change', handleMatchChange);
    };
  }, []);

  return device;
};

export default useClientMediaQuery;