/
Cybran65
/
Project_0
Обзор
Документация
Войти
/
Cybran65
/
Project_0
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
CI/CD
Аналитика
Безопасность
master
src/lib/useLayoutMode.ts
50 строк
2 KB
Cybran65
@
09 авг 2026, 20:30
09 авг 2026, 20:30
98a9bb5
Код
Авторство
О чём код?
import { useEffect, useState } from 'react'; /** * Режим компоновки экрана. * * desktop — обе боковые панели закреплены рядом с рабочей областью; * compact — панели закреплены, но уже, служебная панель ниже; * mobile — панели открываются поверх рабочей области. */ export type LayoutMode = 'desktop' | 'compact' | 'mobile'; /** Границы режимов, px. */ export const COMPACT_MAX = 1200; export const MOBILE_MAX = 900; function detect(width: number): LayoutMode { if (width <= MOBILE_MAX) return 'mobile'; if (width <= COMPACT_MAX) return 'compact'; return 'desktop'; } export function useLayoutMode(): LayoutMode { const [mode, setMode] = useState<LayoutMode>(() => typeof window === 'undefined' ? 'desktop' : detect(window.innerWidth), ); useEffect(() => { const update = () => setMode(detect(window.innerWidth)); update(); window.addEventListener('resize', update); return () => window.removeEventListener('resize', update); }, []); return mode; } /** Устройство с сенсорным вводом: подсказки по мыши в таком случае не нужны. */ export function useCoarsePointer(): boolean { const [coarse, setCoarse] = useState(false); useEffect(() => { const media = window.matchMedia('(pointer: coarse)'); const update = () => setCoarse(media.matches); update(); media.addEventListener('change', update); return () => media.removeEventListener('change', update); }, []); return coarse; }