Hook, which listens for changes in screen width and reacts accordingly.
import { useEffect, useState } from 'react'
export const useMediaQuery = (query: string) => {
const [matches, setMatches] = useState(false)
useEffect(() => {
const mediaQuery = window.matchMedia(query)
setMatches(mediaQuery.matches)
const handler = (event: MediaQueryListEvent) => {
setMatches(event.matches)
}
mediaQuery.addEventListener('change', handler)
return () => mediaQuery.removeEventListener('change', handler)
}, [query])
return matches
}
Example of usage:
const isLargeScreen = useMediaQuery('(min-width: 1024px)')
Go back to shorts