React hook for CSS media queries. Returns boolean and updates when the viewport matches.
import { useState, useEffect } from 'react';
export function useMediaQuery(query: string): boolean {
const [matches, setMatches] = useState(() =>
typeof window !== 'undefined' ? window.matchMedia(query).matches : false
);
useEffect(() => {
const m = window.matchMedia(query);
setMatches(m.matches);
const listener = (e: MediaQueryListEvent) => setMatches(e.matches);
m.addEventListener('change', listener);
return () => m.removeEventListener('change', listener);
}, [query]);
return matches;
}Use any valid CSS media query string. SSR-safe: returns false on server, then updates on client.
Conditional layout or styles based on viewport.
const isMobile = useMediaQuery('(max-width: 768px)');