Toast v0.5.1 · @behivetech

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

Usage

1import { Toast } from "@behivetech/atoms.toast";
2
3<Toast>Content</Toast>;

Examples

Open all 1 →

Basic Toast

1const BasicToast = () => (
2  <>
3    <button
4      type="button"
5      onClick={() =>
6        showToast({ title: "Saved", description: "Your changes were saved." })
7      }
8    >
9      Show info toast
10    </button>
11    <button
12      type="button"
13      onClick={() => showToast({ title: "Published", variant: "success" })}
14    >
15      Show success toast
16    </button>
17    <button
18      type="button"
19      onClick={() =>
20        showToast({ title: "Reservation expires soon", variant: "warning" })
21      }
22    >
23      Show warning toast
24    </button>
25    <button
26      type="button"
27      onClick={() => showToast({ title: "Failed to save", variant: "error" })}
28    >
29      Show error toast
30    </button>
31    <button
32      type="button"
33      onClick={() =>
34        showToast({
35          title: "Structure moved",
36          action: {
37            label: "Undo",
38            onClick: () => showToast({ title: "Move undone" }),
39          },
40        })
41      }
42    >
43      Show toast with an action
44    </button>
45    <Toast />
46  </>
47);
48
49render(<BasicToast />);

Properties

`Toast` props

Prop	Type	Default	Description
`duration`	`number`	`5000`	How 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

Parameter	Type	Default	Description
`message`	`Omit<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

Parameter	Type	Default	Description
`id`	`string`	—	The id `showToast` returned

Returns void