Use media query hook

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

import { useSyncExternalStore } from 'react'

export const useMediaQuery = (query: string) => {
  return useSyncExternalStore(
    callback => {
      const mql = window.matchMedia(query)
      mql.addEventListener('change', callback)
      return () => mql.removeEventListener('change', callback)
    },
    () => window.matchMedia(query).matches,
    () => false
  )
}

Przykład użycia:

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

Powrót do szortów