ultisuite-client/hooks/use-lg-breakpoint.ts
R3D347HR4Y 9266aa34cd huhu
2026-05-19 22:20:43 +02:00

24 lines
601 B
TypeScript

import { useLayoutEffect, useState } from "react"
export const LG_MIN_PX = 1024
const LG_MQ = `(min-width: ${LG_MIN_PX}px)`
export function readLgMatches(): boolean {
if (typeof window === "undefined") return false
return window.matchMedia(LG_MQ).matches
}
export function useIsLg() {
const [matches, setMatches] = useState(false)
useLayoutEffect(() => {
const mql = window.matchMedia(LG_MQ)
const update = () => setMatches(mql.matches)
update()
mql.addEventListener("change", update)
return () => mql.removeEventListener("change", update)
}, [])
return matches
}