Behive Tech Component Registry

Toast

v0.5.0Stable

A toast viewport to mount once, anywhere in the app; `showToast()` from anywhere then renders a dismissible, auto-expiring Radix toast in it.

pnpm add @behivetech/atoms.toast

A toast viewport to mount once, anywhere in the app; showToast() from anywhere then renders a dismissible, auto-expiring Radix toast in it.

Usage

Open in new tab

Properties

Toast props

PropTypeDefaultDescription
durationnumber5000How long a toast stays visible before auto-dismissing, in ms. Defaults to 5000.

Functions

showToast function

Queues a toast on any mounted `Toast` component. Dispatches a plain `window` event under the hood, so it's callable from anywhere with no React context required — including directly from the browser console, e.g. `showToast({ title: "Saved", variant: "success" })`.

showToast(message: Omit<ToastMessage, "id">): string
ParameterTypeDefaultDescription
messageOmit<ToastMessage, "id">——

Returns string — the toast's id, which `dismissToast` takes to remove it early

dismissToast function

Removes a toast before it expires, for a message that stopped being true (an error toast after the retry succeeded). Does nothing for an id that has already expired.

dismissToast(id: string): void
ParameterTypeDefaultDescription
idstring—The id `showToast` returned

Returns void