The Node.js® Website
keii.dev
1'use client';
2
3import { useState, useEffect } from 'react';
4
5const mediaQueryChangeSubscribe = (mq: MediaQueryList, handler: () => void) => {
6 if (mq.addEventListener) {
7 mq.addEventListener('change', handler);
8 } else {
9 mq.addListener(handler);
10 }
11};
12
13const mediaQueryChangeUnsubscribe = (
14 mq: MediaQueryList,
15 handler: () => void
16) => {
17 if (mq.removeEventListener) {
18 mq.removeEventListener('change', handler);
19 } else {
20 mq.removeListener(handler);
21 }
22};
23
24const useMediaQuery = (query: string): boolean | undefined => {
25 const [matches, setMatches] = useState<boolean>();
26
27 useEffect(() => {
28 if (typeof window?.matchMedia === 'function') {
29 const mq = window.matchMedia(query);
30 setMatches(mq.matches);
31
32 const handler = (): void => setMatches(mq.matches);
33 mediaQueryChangeSubscribe(mq, handler);
34
35 return (): void => mediaQueryChangeUnsubscribe(mq, handler);
36 }
37
38 return undefined;
39 }, [query]);
40
41 return matches;
42};
43
44export default useMediaQuery;