Use media query hook

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