// Created on savesnippets.com · https://savesnippets.com/rQNBH4Erh5QD6W
import { useEffect, useState } from 'react';

export function useMediaQuery(query: string): boolean {
  const [matches, setMatches] = useState(() => {
    if (typeof window === 'undefined') return false;
    return window.matchMedia(query).matches;
  });

  useEffect(() => {
    const mql = window.matchMedia(query);
    const onChange = (e: MediaQueryListEvent) => setMatches(e.matches);
    setMatches(mql.matches);                  // sync on mount
    mql.addEventListener('change', onChange);
    return () => mql.removeEventListener('change', onChange);
  }, [query]);

  return matches;
}

// Usage:
function App() {
  const prefersDark = useMediaQuery('(prefers-color-scheme: dark)');
  const isWide      = useMediaQuery('(min-width: 768px)');
  return <div className={prefersDark ? 'dark' : 'light'}>{isWide ? 'wide' : 'narrow'}</div>;
}