my-links/inertia/hooks/use_media_query.tsx

import { useEffect, useState } from 'react';

export function useMediaQuery(query: string): boolean {
  const [matches, setMatches] = useState<boolean>(false);

  const handleMediaChange = () => setMatches(getMediaMatches(query));

  useEffect(() => {
    const matchMedia = window.matchMedia(query);
    handleMediaChange();

    matchMedia.addEventListener('change', handleMediaChange);
    return () => matchMedia.removeEventListener('change', handleMediaChange);
  }, [query]);

  return matches;
}

function getMediaMatches(query: string): boolean {
  if (typeof window !== 'undefined') {
    return window.matchMedia(query).matches;
  }
  return false;
}