File size: 604 Bytes
852e9a3 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | import { useState, useEffect } from "react"
// Returns true when the viewport is at/below the breakpoint (mobile/tablet).
export function useIsMobile(breakpoint = 820) {
const query = `(max-width: ${breakpoint}px)`
const [matches, setMatches] = useState(
() => typeof window !== "undefined" && window.matchMedia(query).matches
)
useEffect(() => {
const mq = window.matchMedia(query)
const onChange = () => setMatches(mq.matches)
onChange()
mq.addEventListener("change", onChange)
return () => mq.removeEventListener("change", onChange)
}, [query])
return matches
}
|