Toastflow
Playground
API

State

Toastflow state reference covering toast instance structure, lifecycle phases, and reactive subscriptions for reading store state.

Toastflow state is intentionally small — visible toasts and queued toasts.

Full type definitions:packages/core/src/types.ts — look for ToastState, ToastInstance, and ToastContext.

Shape

toasts
ToastInstance[]
Currently visible toasts, including transitional phases.
queue
ToastInstance[]
Queued toasts waiting for capacity.

Lifecycle Phases

Each visible toast carries an optional phase:

PhaseMeaning
enterJust inserted, enter animation playing
leavingDismiss animation for a single toast
clear-allBatch dismiss animation

State Flow

show(...)

Toast enters state with phase: "enter".

dismiss(id)

Toast becomes phase: "leaving".

After leave timeout

Toast removed from state.toasts. Queue processes next if capacity opens.

Subscribe

subscribe-state.ts
const stop = toast.subscribe((state) => {
  console.log("visible:", state.toasts.length);
  console.log("queued:", state.queue.length);
});

stop();

The listener fires immediately with the current snapshot on subscribe.

Getters

const state = toast.getState();
console.log(state.toasts, state.queue);

Use getState() for on-demand checks. For continuous reactivity, prefer subscribe(...).

Copyright © 2026