Другие фреймворки

В ядре нет кода под конкретный фреймворк, а его объект состояния следует контракту, который уже понимает большинство реактивных систем: subscribe(listener) сразу вызывает слушателя с текущим значением и возвращает функцию отписки. Этого достаточно, чтобы использовать его со Svelte, Solid и Angular без адаптера. Импортируйте из корня пакета:

import { responsiveState } from 'responsive-media'

responsiveState — общий экземпляр с брейкпоинтами mobile, tablet и desktop по умолчанию. Свои задаются через setResponsiveConfig(), а изолированный экземпляр создаётся через createResponsiveState().

Svelte

Состояние как оно есть — стор Svelte, поэтому к нему применим префикс $:

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

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

Solid

from() принимает любой объект с методом subscribe:

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

Оберните подписку в RxJS Observable и превратите её в сигнал:

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() },
)

Функция, которую возвращает responsiveState.subscribe, служит завершающей, поэтому отписка от observable убирает слушателя.

Любая другая библиотека сигналов

toSignal(key, factory) привязывает один ключ брейкпоинта к записываемому сигналу формы { value } — см. Утилиты. Для всего остального on(key, callback) и onEnter / onLeave дают колбэки по ключам.

Серверный рендеринг

Вне Vue и React библиотека не управляет гидратацией за вас. Засейте сервер через ssrState и подставьте настоящие значения после первого рендера на клиенте, если ваш фреймворк сообщает о несовпадениях.