1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24import { useEffect, useState } from 'react';
/**
* Reactive wrapper around `window.matchMedia`. Returns whether the given media
* query currently matches and updates on viewport changes.
*
* Example: `const isDesktop = useMediaQuery('(min-width: 1024px)');`
*/
export function useMediaQuery(query: string): boolean {
const [matches, setMatches] = useState<boolean>(() =>
typeof window !== 'undefined' ? window.matchMedia(query).matches : false,
);
useEffect(() => {
const mql = window.matchMedia(query);
const onChange = (e: MediaQueryListEvent) => setMatches(e.matches);
mql.addEventListener('change', onChange);
setMatches(mql.matches);
return () => mql.removeEventListener('change', onChange);
}, [query]);
return matches;
}