File size: 743 Bytes
4319071 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | import { useEffect, useState } from 'react';
/**
* Subscribe to a CSS media query and re-render when it flips.
* Cheap: one matchMedia listener for the lifetime of the consumer.
*/
export function useMediaQuery(query) {
const [matches, setMatches] = useState(() =>
typeof window !== 'undefined' && window.matchMedia
? window.matchMedia(query).matches
: false,
);
useEffect(() => {
if (typeof window === 'undefined' || !window.matchMedia) return;
const mql = window.matchMedia(query);
const onChange = (e) => setMatches(e.matches);
setMatches(mql.matches);
mql.addEventListener('change', onChange);
return () => mql.removeEventListener('change', onChange);
}, [query]);
return matches;
}
|