Use media query hook

Hook, który nasłuchuje zmiany w szerokości ekranu i reaguje na nie odpowiednio.

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
}

Przykład użycia:

const isLargeScreen = useMediaQuery('(min-width: 1024px)')

Powrót do szortów