Other Frameworks

The core has no framework code, and its state object follows the contract most reactive systems already understand: subscribe(listener) calls the listener immediately with the current value and returns a function that unsubscribes. That is enough to use it with Svelte, Solid and Angular without an adapter. Import from the package root:

import { responsiveState } from 'responsive-media'

responsiveState is the shared instance with the default mobile, tablet and desktop breakpoints. Describe your own with setResponsiveConfig(), or create an isolated one with createResponsiveState().

Svelte

The state is a Svelte store as it is, so the $ prefix works on it:

<script>
  import { responsiveState } from 'responsive-media'
</script>

{#if $responsiveState.mobile}
  <MobileNav />
{:else}
  <DesktopNav />
{/if}

Solid

from() accepts any object with a subscribe method:

import { from, Show } from 'solid-js'
import { responsiveState } from 'responsive-media'

function Nav() {
  const responsive = from(responsiveState)
  return (
    <Show when={!responsive()?.mobile} fallback={<MobileNav />}>
      <DesktopNav />
    </Show>
  )
}

Angular

Wrap the subscription in an RxJS Observable and turn it into a signal:

import { toSignal } from '@angular/core/rxjs-interop'
import { Observable } from 'rxjs'
import { responsiveState } from 'responsive-media'

const responsive = toSignal(
  new Observable<Record<string, boolean>>((subscriber) =>
    responsiveState.subscribe((state) => subscriber.next({ ...state })),
  ),
  { initialValue: responsiveState.getState() },
)

The function responsiveState.subscribe returns is the teardown, so unsubscribing from the observable removes the listener.

Any other signals library

toSignal(key, factory) binds a single breakpoint key to a writable signal shaped like { value } — see Utilities. For anything else, on(key, callback) and onEnter / onLeave give you per-key callbacks.

Server rendering

Outside Vue and React the library does not manage hydration for you. Seed the server with ssrState, and apply the real values after the first client render if your framework reports mismatches.