31 lines
1.2 KiB
TypeScript
31 lines
1.2 KiB
TypeScript
"use client"
|
|
|
|
import { useState, useEffect } from 'react'
|
|
|
|
export function useMediaQuery(query: string): boolean {
|
|
// Определяем начальное состояние на стороне сервера (SSR)
|
|
const [matches, setMatches] = useState(false)
|
|
|
|
useEffect(() => {
|
|
// После монтирования компонента проверяем соответствие
|
|
const media = window.matchMedia(query)
|
|
|
|
// Устанавливаем начальное значение
|
|
setMatches(media.matches)
|
|
|
|
// Создаем функцию-обработчик, которая будет вызываться при изменении медиа-запроса
|
|
const listener = (event: MediaQueryListEvent) => {
|
|
setMatches(event.matches)
|
|
}
|
|
|
|
// Добавляем слушатель изменений
|
|
media.addEventListener('change', listener)
|
|
|
|
// Очищаем слушатель при размонтировании компонента
|
|
return () => {
|
|
media.removeEventListener('change', listener)
|
|
}
|
|
}, [query]) // Перезапускаем эффект только при изменении запроса
|
|
|
|
return matches
|
|
}
|