41 lines
1.5 KiB
TypeScript
41 lines
1.5 KiB
TypeScript
"use client"
|
|
|
|
import { useState, useEffect } from 'react'
|
|
|
|
/**
|
|
* Хук для отслеживания медиа-запросов (например, для определения мобильного устройства)
|
|
* @param query Медиа-запрос, например: '(max-width: 768px)'
|
|
* @returns Булево значение, соответствующее запросу
|
|
*/
|
|
export function useMediaQuery(query: string): boolean {
|
|
const [matches, setMatches] = useState<boolean>(false)
|
|
|
|
useEffect(() => {
|
|
// Проверяем, поддерживается ли matchMedia
|
|
if (typeof window !== 'undefined' && window.matchMedia) {
|
|
const media = window.matchMedia(query)
|
|
// Установка начального значения
|
|
setMatches(media.matches)
|
|
|
|
// Обработчик изменений
|
|
const listener = (event: MediaQueryListEvent) => {
|
|
setMatches(event.matches)
|
|
}
|
|
|
|
// Добавляем слушатель
|
|
if (media.addEventListener) {
|
|
media.addEventListener('change', listener)
|
|
return () => media.removeEventListener('change', listener)
|
|
} else {
|
|
// Для старых браузеров
|
|
media.addListener(listener)
|
|
return () => media.removeListener(listener)
|
|
}
|
|
}
|
|
|
|
// Если matchMedia не поддерживается, возвращаем дефолтное значение
|
|
return () => {}
|
|
}, [query])
|
|
|
|
return matches
|
|
}
|