Responsive Media
Реактивное булево состояние на основе CSS media queries и размеров элементов для Vanilla JS, Vue 3 и React 19+ — без обязательных peer-зависимостей.
Реактивное состояние от медиа- и контейнерных запросов
Отслеживайте изменения вьюпорта и размеров элементов через единый API. ReactiveResponsiveState использует window.matchMedia для брейкпоинтов, а ContainerState — ResizeObserver для оценки размеров и ориентации элемента. Состояние всегда актуально и обновляется без лишних ререндеров.
Гибкая конфигурация с AND/OR и множеством условий
Описывайте брейкпоинты как массив условий (AND) или вложенный массив групп (OR). Поддерживаются min/max-width/height, orientation, aspect-ratio, prefers-color-scheme, hover, pointer, resolution, display-mode и raw-строки. Это даёт полный контроль над логикой адаптивности.
Богатый API подписки и упорядоченные брейкпоинты
Подписывайтесь на общие изменения (subscribe), конкретные ключи (on), переходы (onEnter/onLeave), однократные события (once) и ожидайте выполнения условия (waitFor). Упорядоченные брейкпоинты дают методы current, isAbove, isBelow и between для семантических сравнений.
Утилиты, пресеты и интеграция с сигналами
Синхронизируйте состояние с CSS-переменными (syncCSSVars), генерируйте DOM-события (emitDOMEvents), преобразуйте ключи в сигналы (toSignal) и выбирайте значения по первому активному брейкпоинту (match). Используйте готовые пресеты для Tailwind, Bootstrap и доступности.
Готовая интеграция с Vue 3 и React 19+
Vue-композаблы (useResponsive, useBreakpoints, useMediaQuery, useContainerState) и React-хуки на useSyncExternalStore обеспечивают реактивность в шаблонах и компонентах. Все API SSR-безопасны, поддерживают гидратацию и не требуют обязательных peer-зависимостей.