use-is-match-media

1import { useState } from 'react'
2import { useIsomorphicLayoutEffect } from '@/registry/hooks/use-isomorphic-layout-effect'
3 
4export function useIsMatchMedia(mediaQueryString: string) {
5  const [isMatch, setIsMatch] = useState(() => {
6    if (typeof window === 'undefined') return false
7    return window.matchMedia(mediaQueryString).matches
8  })
9 
10  useIsomorphicLayoutEffect(() => {
11    const mediaQueryList = window.matchMedia(mediaQueryString)
12 
13    setIsMatch(mediaQueryList.matches)
14 
15    const listener = (event: MediaQueryListEvent) => {
16      setIsMatch(event.matches)
17    }
18 
19    mediaQueryList.addEventListener('change', listener)
20 
21    return () => {
22      mediaQueryList.removeEventListener('change', listener)
23    }
24  }, [mediaQueryString])
25 
26  return isMatch
27}