Reference

Architecture

responsive-media
│
├── BaseResponsiveState  (abstract)
│     Proxy over a plain Record<string, boolean>
│     Batched updates — all matchMedia/ResizeObserver callbacks collected
│     before a single notify() fires
│     Subscription registry: global listeners + per-key listeners
│     Debounce for subscribe(); key listeners never debounced
│     Ordered breakpoint helpers: current / isAbove / isBelow / between
│     Utilities: syncCSSVars / emitDOMEvents / toSignal / hydrate / destroy
│
├── ReactiveResponsiveState  extends BaseResponsiveState
│     setupSources()  → window.matchMedia per config key
│     Generated media query string stored in mediaQueries map
│     Batches all MediaQueryList 'change' events, then flushes
│     setConfig() / destroy() cleanupSources() removes matchMedia handlers
│
├── ContainerState  extends BaseResponsiveState
│     setupSources()  → single ResizeObserver on the target element
│     Evaluates width/height/orientation/aspect-ratio conditions in JS
│     Reconnects observer when config changes; teardown on destroy()
│
├── createResponsiveState(config, options)
│     Factory — returns a new ReactiveResponsiveState instance
│
├── responsiveState  (global singleton)
│     Pre-configured with default ResponsiveConfig (mobile/tablet/desktop)
│     setResponsiveConfig() / getResponsiveState() / getResponsiveMediaQueries()
│     delegate to this instance
│
├── toMediaQueryString(conditions)
│     Converts MediaQueryConfig → CSS string
│     AND: flat array → joined with ' and '
│     OR:  nested array → groups joined with ', '
│     Numeric values get 'px' suffix (except raw / orientation / …)
│
├── match(state, map, fallback?)
│     First-match lookup — returns mapped value for first true key in map
│
├── subscribeMediaQuery(query, callback)
│     Thin wrapper around window.matchMedia + addEventListener('change')
│     Returns cleanup function
│
├── Vue adapter  (vue-responsive.ts)
│     ResponsivePlugin  — app.use(); calls setResponsiveConfig
│     useResponsive()   — returns shallowReactive mirror; subscribe() syncs it
│     useBreakpoints()  — returns { current, isAbove, isBelow, between }
│                          all methods read from the reactive mirror
│     useMediaQuery()   — wraps subscribeMediaQuery in a ref + onUnmounted
│     useContainerState() — watchEffect over templateRef; creates/destroys
│                           ContainerState; returns shallowReactive mirror
│
├── React adapter  (react-responsive.ts)
│     useResponsive()     — useSyncExternalStore(subscribe, getState, getState)
│     useBreakpoints()    — useSyncExternalStore + wraps ordered helpers
│     useMediaQuery()     — useSyncExternalStore over subscribeMediaQuery
│     useContainerState() — useEffect creates ContainerState; useState mirror
│
└── Presets  (presets.ts)
      ResponsiveConfig     — default mobile/tablet/desktop
      TailwindPreset / TailwindOrder
      BootstrapPreset / BootstrapOrder
      AccessibilityPreset

Bundle size & peer dependencies

Entry point	Peer deps	Notes
responsive-media	(none required)	Core + Vue composables (tree-shaken when Vue absent)
responsive-media/react	react ^19	React hooks only
responsive-media/presets	(none)	Preset configs only — add to any instance
responsive-media/container	(none)	ContainerState class + factory only

The package ships as tree-shakeable ESM and CommonJS. Vue composables (ResponsivePlugin, useResponsive, etc.) are included in the main bundle but resolve to no-ops when Vue is not installed, so the core footprint stays minimal in non-Vue projects. The React entry point is code-split and never imported by the main bundle.

Exported API reference

Main entry (responsive-media)

Export	Type	Description
responsiveState	ReactiveResponsiveState	Global singleton, default ResponsiveConfig
setResponsiveConfig	function	Reconfigure the global singleton
getResponsiveState	function	Get state snapshot from global singleton
getResponsiveMediaQueries	function	Get CSS query strings from global singleton
createResponsiveState	function	Create an isolated ReactiveResponsiveState instance
createContainerState	function	Create a ContainerState for an element
toMediaQueryString	function	Convert MediaQueryConfig to CSS string
match	function	Pick a value by first matching breakpoint key
subscribeMediaQuery	function	Subscribe to a raw CSS media query string
ResponsiveConfig	const	Default mobile / tablet / desktop breakpoints
BaseResponsiveState	class	Abstract base (for extension)
ReactiveResponsiveState	class	Viewport state (matchMedia-backed)
ContainerState	class	Element container state (ResizeObserver-backed)
ResponsivePlugin	Vue plugin	Vue app plugin
useResponsive	Vue composable	Reactive state object
useBreakpoints	Vue composable	Ordered breakpoint helpers
useMediaQuery	Vue composable	Single raw media query
useContainerState	Vue composable	Element container queries
ConfigToState	type	Derives state type from config
MediaQueryConfig	type	Config entry type
MediaQueryCondition	type	Single condition type
ResponsiveState	type	Record<string, boolean>
SetConfigOptions	type	Options for setConfig / createResponsiveState
BreakpointHelpers	type	Return type of useBreakpoints

React entry (responsive-media/react)

Export	Description
useResponsive	State hook (useSyncExternalStore)
useBreakpoints	Ordered breakpoint helpers hook
useMediaQuery	Single raw media query hook
useContainerState	Element container queries hook
BreakpointHelpers	Type for useBreakpoints return value

Presets entry (responsive-media/presets)

Export	Description
TailwindPreset	Tailwind CSS v3/v4 breakpoints
TailwindOrder	Ordered key array for TailwindPreset
BootstrapPreset	Bootstrap 5 breakpoints
BootstrapOrder	Ordered key array for BootstrapPreset
AccessibilityPreset	User-preference media queries

Container entry (responsive-media/container)

Export	Description
ContainerState	Class for element container queries
createContainerState	Factory function

License

MIT