Responsive Media
Reactive boolean state from CSS media queries and element dimensions for Vanilla JS, Vue 3, and React 19+ — with no required peer dependencies.
Reactive state from media and container queries
Track viewport and element dimension changes through a unified API. ReactiveResponsiveState uses window.matchMedia for breakpoints, while ContainerState uses ResizeObserver to evaluate element size and orientation. The state is always up‑to‑date and updates without unnecessary re‑renders.
Flexible configuration with AND/OR and many conditions
Describe breakpoints as an array of conditions (AND) or nested array of groups (OR). Supports min/max-width/height, orientation, aspect-ratio, prefers-color-scheme, hover, pointer, resolution, display-mode, and raw strings. This gives full control over responsiveness logic.
Rich subscription API and ordered breakpoints
Subscribe to global changes (subscribe), specific keys (on), transitions (onEnter/onLeave), one‑time events (once), and wait for a condition (waitFor). Ordered breakpoints provide current, isAbove, isBelow, and between methods for semantic comparisons.
Utilities, presets, and signal integration
Sync state with CSS custom properties (syncCSSVars), emit DOM events (emitDOMEvents), turn keys into signals (toSignal), and pick values by the first active breakpoint (match). Use ready‑to‑use presets for Tailwind, Bootstrap, and accessibility.
Ready‑to‑use integration with Vue 3 and React 19+
Vue composables (useResponsive, useBreakpoints, useMediaQuery, useContainerState) and React hooks built on useSyncExternalStore provide reactivity in templates and components. All APIs are SSR‑safe, support hydration, and have no required peer dependencies.