UseMedia

1'use client';
2 
3import { useEffect, useState } from 'react';
4 
5const getInitialState = (query: string, defaultState?: boolean): boolean => {
6  const isBrowser = typeof window !== 'undefined';
7 
8  if (!query || typeof query !== 'string') {
9    throw new Error('useMedia: query should be a non-empty string.');
10  }
11 
12  if (defaultState !== undefined) {
13    return defaultState;
14  }
15 
16  if (isBrowser) {
17    return window.matchMedia(query).matches;
18  }
19 
20  if (process.env.NODE_ENV !== 'production') {
21    console.warn(
22      '`useMedia` When server side rendering, defaultState should be defined to prevent a hydration mismatches.',
23    );
24  }
25 
26  return false;
27};
28 
29export function useMedia(query: string, defaultState?: boolean): boolean {
30  const [state, setState] = useState<boolean>(() =>
31    getInitialState(query, defaultState),
32  );
33 
34  useEffect(() => {
35    if (!query || typeof query !== 'string') {
36      throw new Error('useMedia: query should be a non-empty string.');
37    }
38 
39    let mounted = true;
40    const mql = window.matchMedia(query);
41 
42    const onChange = () => {
43      if (!mounted) {
44        return;
45      }
46      setState(!!mql.matches);
47    };
48 
49    mql.addEventListener('change', onChange);
50    setState(mql.matches);
51 
52    return () => {
53      mounted = false;
54      mql.removeEventListener('change', onChange);
55    };
56  }, [query]);
57 
58  return state;
59}