alisaza
e1eaf5eff5
Extract admin dashboard from ghabilee-frontend2 into a dedicated Next.js app for backoffice.ghabilee.ir (no SEO indexing / Clarity).
40 lines
957 B
TypeScript
40 lines
957 B
TypeScript
// hooks/useMediaQuery.ts
|
|
import { useEffect, useState, useRef } from 'react'
|
|
|
|
export function useMediaQuery(query: string) {
|
|
const [matches, setMatches] = useState(() => {
|
|
if (typeof window === 'undefined') return false
|
|
|
|
return window.matchMedia(query).matches
|
|
})
|
|
const isMountedRef = useRef(true)
|
|
|
|
useEffect(() => {
|
|
if (typeof window === 'undefined') return
|
|
|
|
isMountedRef.current = true
|
|
const media = window.matchMedia(query)
|
|
const listener = (e: MediaQueryListEvent) => {
|
|
if (isMountedRef.current) {
|
|
setMatches(e.matches)
|
|
}
|
|
}
|
|
|
|
// Defer state update to avoid synchronous setState in effect
|
|
queueMicrotask(() => {
|
|
if (isMountedRef.current) {
|
|
setMatches(media.matches)
|
|
}
|
|
})
|
|
|
|
media.addEventListener('change', listener)
|
|
|
|
return () => {
|
|
isMountedRef.current = false
|
|
media.removeEventListener('change', listener)
|
|
}
|
|
}, [query])
|
|
|
|
return matches
|
|
}
|