API подписки

Все методы ниже доступны и на ReactiveResponsiveState, и на ContainerState. Если не указано иное, каждый возвращает функцию отписки (() => void).

Подписка

subscribe(listener)

Срабатывает немедленно с текущим состоянием, затем при каждом изменении. Подвержен debounce.

const stop = state.subscribe((s) => {
  document.body.dataset.bp = Object.keys(s)
    .filter((k) => s[k])
    .join(' ')
})
stop() // отписка

Подписка на ключ

on(key, callback)

Срабатывает немедленно с текущим значением для key, затем при каждом изменении. Никогда не дебаунсится.

const off = state.on('mobile', (matches) => {
  header.classList.toggle('header--mobile', matches)
})
off()

При входе

onEnter(key, callback)

Срабатывает только на переходах false → true. Пропускает начальное значение. Никогда не дебаунсится.

state.onEnter('mobile', () => initMobileMenu())

При выходе

onLeave(key, callback)

Срабатывает только на переходах true → false. Пропускает начальное значение. Никогда не дебаунсится.

state.onLeave('mobile', () => destroyMobileMenu())

Однократно

once(key, callback)

Срабатывает на следующем изменении key, затем автоматически отписывается. Не срабатывает для текущего значения. Никогда не дебаунсится.

state.once('mobile', (matches) => {
  console.log('mobile changed to:', matches)
})

При следующем изменении

onNextChange(callback)

Срабатывает на следующем глобальном изменении состояния, затем автоматически отписывается. Подвержен debounce.

state.onNextChange((s) => console.log('first change:', s))

При смене брейкпоинта

onBreakpointChange(callback)

Срабатывает, когда меняется активный брейкпоинт (т. е. меняется current), предоставляя from и to. Подвержен debounce.

state.onBreakpointChange((from, to) => {
  console.log(`breakpoint: ${from} → ${to}`)
})

Ожидание значения

waitFor(key, expectedValue?)

Promise<void>

Разрешается, когда key достигает expectedValue (по умолчанию true). Разрешается немедленно, если условие уже выполнено. Никогда не дебаунсится.

await state.waitFor('desktop')
initDesktopChart()

// Ждём, пока mobile не станет false
await state.waitFor('mobile', false)

Упорядоченные хелперы брейкпоинтов

Эти хелперы требуют order брейкпоинтов — задаётся либо через опции setConfig / createResponsiveState, либо выводится из порядка ключей в конфиге.

state.current

string | null

Геттер. Первый активный ключ брейкпоинта по порядку, либо null.

if (state.current === 'mobile') showDrawer()

state.isAbove(key)

boolean

true, когда текущий брейкпоинт идёт после key в порядке.

// order: ['xs', 'sm', 'md', 'lg', 'xl']
// current = 'lg'
state.isAbove('sm') // → true
state.isAbove('xl') // → false

state.isBelow(key)

boolean

true, когда текущий брейкпоинт идёт перед key в порядке.

state.isBelow('md') // → true  (current = 'sm')

state.between(from, to)

boolean

true, когда текущий брейкпоинт находится между from и to (включительно).

state.between('sm', 'lg') // → true  (current = 'md')