useMediaQuery

1'use client'
2 
3import * as React from 'react'
4 
5const isBrowser = typeof window !== 'undefined'
6 
7export function useMediaQuery(
8  query: string,
9) {
10  const mediaQuery = React.useMemo(() => isBrowser ? window.matchMedia(query) : null, [query])
11 
12  const [matches, setMatches] = React.useState(mediaQuery?.matches ?? false)
13 
14  React.useEffect(() => {
15    if (!mediaQuery)
16      return
17 
18    const handleChange = (event: MediaQueryListEvent) => {
19      setMatches(event.matches)
20    }
21 
22    mediaQuery.addEventListener('change', handleChange)
23 
24    return () => {
25      mediaQuery.removeEventListener('change', handleChange)
26    }
27  }, [mediaQuery])
28 
29  return matches
30}