Responsive Media

Реактивное булево состояние на основе CSS media queries и размеров элементов для Vanilla JS, Vue 3, Nuxt и React 19+ — условия AND/OR, контейнерные запросы, упорядоченные хелперы брейкпоинтов, богатый API подписки, синхронизация CSS-переменных, SSR-безопасность, типы из вашего собственного конфига — без обязательных peer-зависимостей.

Возможности

• Фреймворк-агностичное ядро — ReactiveResponsiveState и ContainerState работают с Vanilla JS, любой библиотекой сигналов или любым фреймворком; Vue и React — опциональные peer-зависимости
• Брейкпоинты вьюпорта — на основе window.matchMedia; условия объединяются через AND (плоский массив) или OR (вложенный массив); поддержка сырого типа медиа для print, screen и т. д.
• Полный словарь условий — min/max-width, min/max-height, orientation, aspect-ratio, prefers-color-scheme, prefers-reduced-motion, prefers-contrast, hover, pointer, forced-colors, resolution, display-mode и raw
• Контейнерные запросы (на стороне JS) — ContainerState отслеживает размеры элемента через ResizeObserver и вычисляет условия брейкпоинтов в JavaScript; идентичный API с состоянием вьюпорта
• Богатый API подписки — subscribe, on, onEnter, onLeave, once, onNextChange, onBreakpointChange, waitFor; опциональный debounce для subscribe; слушатели по конкретному ключу никогда не дебаунсятся
• Упорядоченные хелперы брейкпоинтов — current, isAbove(), isBelow(), between() для семантических сравнений вьюпорта; порядок берётся из порядка ключей конфига либо из явной опции order
• Утилиты — syncCSSVars (CSS custom properties), emitDOMEvents (DOM CustomEvents), toSignal (любая библиотека сигналов — Preact, Angular, SolidJS, Vue), match (выбор значения по первому активному брейкпоинту), subscribeMediaQuery (сырой одиночный запрос)
• Адаптер Vue 3 — useResponsive, useBreakpoints, useMediaQuery, useContainerState; полностью реактивно в шаблонах и computed; ResponsivePlugin для глобальной конфигурации
• Адаптер React 19+ — те же четыре хука; useSyncExternalStore для безопасного конкурентного рендеринга; SSR-безопасно (false на сервере)
• Модуль Nuxt — responsive-media/nuxt: брейкпоинты в nuxt.config.ts, автоматически подключаемые composables с типами по вашим брейкпоинтам, плагин приложения и ssrState для того, что рендерит сервер
• SSR с безопасной гидратацией — ssrState даёт серверу раскладку, отложенная гидратация убирает предупреждение о несовпадении, а подсказки запроса (cookie, user-agent) позволяют серверу рендерить под устройство самого посетителя
• Больше хуков — useResponsiveValue (значение по брейкпоинту), useUserPreferences (тёмная тема, reduced motion, …), useViewportSize (размер окна числами) и реактивный запрос для useMediaQuery
• CSS из того же конфига — SCSS-модуль, @custom-media и screens для Tailwind, сгенерированные из ваших брейкпоинтов
• Помощники для тестов — responsive-media/testing — управляемый matchMedia для Vitest и Jest
• Типы из вашего конфига — defineResponsive(config) (Vue и React) выводит состояние и ключи брейкпоинтов, так что опечатка — ошибка компиляции; useContainerState выводит свои ключи так же
• Пресеты — TailwindPreset, BootstrapPreset, AccessibilityPreset из коробки; запросы пользовательских предпочтений (dark, reducedMotion, highContrast, print, …)
• SSR-безопасность — все API проверяют наличие window / matchMedia / ResizeObserver перед использованием; hydrate() предотвращает сдвиг разметки на клиенте
• TypeScript — полные дженерики; ConfigToState<T> выводит тип булева состояния из любого объекта конфига