dom

useMediaQuery

Subscribes to a CSS media query and returns whether it currently matches. Updates reactively when the viewport changes.

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
}

Was this helpful?

Search

useMediaQuery