API подписки

Все методы ниже доступны и на ReactiveResponsiveState, и на ContainerState.

subscribe(listener) → unsubscribe

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

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

on(key, callback) → unsubscribe

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

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

onEnter(key, callback) → unsubscribe

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

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

onLeave(key, callback) → unsubscribe

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

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

once(key, callback) → unsubscribe

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

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

onNextChange(callback) → unsubscribe

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

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

onBreakpointChange(callback) → unsubscribe

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

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

waitFor(key, expectedValue?) → Promise

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

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

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

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

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

state.current: геттер

Возвращает первый активный ключ брейкпоинта по порядку, либо 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')