Skip to main content

useMediaQuery

import { useState } from 'react'

const useMediaQuery = (query: string): boolean => {
const mediaMatch = window.matchMedia(query)
const [matches, setMatches] = useState(mediaMatch.matches)

useEffect(() => {
const handler = (e: MediaQueryListEvent) => setMatches(e.matches)
mediaMatch.addListener((e) => setMatches(e.matches))
return () => mediaMatch.removeListener(handler)
})
return matches
}