Hooks useToast

useToast

Show a toast from anywhere: booked, saved, failed. One <Toaster /> near the root renders them.

Preview

Usage

tsx

import { useToast, toast, Toaster } from "zostel-ui";

// once, near the root
<Toaster />

// in a component
const { toast, dismiss } = useToast();
toast({ title: "Saved", description: "Zostel Goa is in your list." });

// outside React (a fetch handler, a store)
toast({ variant: "destructive", title: "That didn't go through" });

Returns

Prop	Type	Default	Description
`toast`	`(props) => { id, dismiss, update }`	—	Shows one (title, description, variant, action, duration).
`dismiss`	`(id?: string) => void`	—	Closes one, or all.
`toasts`	`ToasterToast[]`	—	What is showing (the Toaster reads it).

toast

Type: (props) => { id, dismiss, update }

Default: —

Shows one (title, description, variant, action, duration).

dismiss

Type: (id?: string) => void

Default: —

Closes one, or all.

toasts

Type: ToasterToast[]

Default: —

What is showing (the Toaster reads it).

Note

One toast at a time: a new one replaces the last. See Toast for every option.