useTimedToast

State for stacked, self-dismissing toasts.

const { toast, toasts, showToast, hideToast } = useTimedToast(duration = 3000, { max = 5 })

State for `Toast`. showToast adds a toast that removes itself after duration; several can be on screen at once, and beyond max the oldest is dropped. Render <Toast toasts={toasts} onClose={hideToast} /> once.

Click a few times: toasts stack, and beyond 3 the oldest goes.

API

Parameters

durationnumber
Default: 3000
Default lifetime of a toast in ms. A toast shown with duration: 0 stays until hidden.
options.maxnumber
Default: 5
Most toasts shown at once; the oldest is dropped beyond it.

Parameters props
Prop	Type	Default	Description
`duration`	number	`3000`	Default lifetime of a toast in ms. A toast shown with `duration: 0` stays until hidden.
`options.max`	number	`5`	Most toasts shown at once; the oldest is dropped beyond it.

Returns

toastsToast[]
Toasts on screen, oldest first. Each is { id, msg, type, link, actions, icon }.
toastToast | null
The newest toast, for the single-toast <Toast toast={toast} /> usage.
showToast(msg, type?, options?) => id
Adds a toast and returns its id. type is "success" (default), "danger" (or "error"), "warning" or "info". options: link: { href, label }, actions: { label, onClick }[], icon, duration.
hideToast(id?) => void
Removes the toast with that id, or every toast when called without one.

Returns props
Prop	Type	Default	Description
`toasts`	Toast[]	–	Toasts on screen, oldest first. Each is `{ id, msg, type, link, actions, icon }`.
`toast`	Toast \| null	–	The newest toast, for the single-toast `<Toast toast={toast} />` usage.
`showToast`	(msg, type?, options?) => id	–	Adds a toast and returns its id. `type` is "success" (default), "danger" (or "error"), "warning" or "info". `options`: `link: { href, label }`, `actions: { label, onClick }[]`, `icon`, `duration`.
`hideToast`	(id?) => void	–	Removes the toast with that id, or every toast when called without one.