dom

useMediaQuery

Se suscribe a una media query CSS y devuelve si coincide en este momento. Se actualiza reactivamente cuando cambia el viewport.

useMediaQuery.ts

import { useState, useEffect } from "react"

export function useMediaQuery(query: string): boolean {
  const [matches, setMatches] = useState(false)

  useEffect(() => {
    const media = window.matchMedia(query)
    setMatches(media.matches)

    const listener = (e: MediaQueryListEvent) => setMatches(e.matches)
    media.addEventListener("change", listener)
    return () => media.removeEventListener("change", listener)
  }, [query])

  return matches
}

¿Fue útil?

Inicia sesión para dar feedback

Buscar

useMediaQuery