Toastflow
Playground
API

State

Toast state structure, lifecycle phases, and reactive subscriptions.

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

// ToastState
{
  toasts: ToastInstance[];  // currently visible (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

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