VueCraft NPM

Тема

responsive-media

responsive-media

Реактивное булево состояние на основе CSS media queries и размеров элементов для Vanilla JS, Vue 3 и 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 на сервере)
  • Пресеты — TailwindPreset, BootstrapPreset, AccessibilityPreset из коробки; запросы пользовательских предпочтений (dark, reducedMotion, highContrast, print, …)
  • SSR-безопасность — все API проверяют наличие window / matchMedia / ResizeObserver перед использованием; hydrate() предотвращает сдвиг разметки на клиенте
  • TypeScript — полные дженерики; ConfigToState<T> выводит тип булева состояния из любого объекта конфига

Установка ​

bash
npm install responsive-media

Обязательных peer-зависимостей нет. Адаптеры Vue и React становятся доступны автоматически, когда установлен соответствующий пакет:

bash
npm install vue@>=3.3     # для Vue composables
npm install react@>=19    # для React-хуков

Быстрый старт ​

ts
import { responsiveState, setResponsiveConfig } from 'responsive-media';

setResponsiveConfig({
  mobile:  [{ type: 'max-width',  value: 767 }],
  tablet:  [{ type: 'min-width',  value: 768 }, { type: 'max-width', value: 1023 }],
  desktop: [{ type: 'min-width',  value: 1024 }],
});

// Читаем текущее состояние
console.log(responsiveState.proxy.mobile);   // true / false

// Подписываемся на изменения
const stop = responsiveState.subscribe((state) => {
  console.log('desktop:', state.desktop);
});

// Очистка
stop();