dashboard-icons/web/src/hooks/use-media-query.ts
2025-04-17 18:05:07 +02:00

26 lines
556 B
TypeScript

"use client"
import { useEffect, useState } from "react"
export function useMediaQuery(query: string): boolean {
const [matches, setMatches] = useState(false)
useEffect(() => {
const media = window.matchMedia(query)
// Initial check
if (media.matches !== matches) {
setMatches(media.matches)
}
// Setup listener for changes
const listener = () => setMatches(media.matches)
media.addEventListener("change", listener)
// Cleanup
return () => media.removeEventListener("change", listener)
}, [query, matches])
return matches
}