HooksFree

useToast

Shows, updates and closes toasts from anywhere below a Toaster.

Returns the toast manager of the nearest . Call with a title, an optional description and a type, and the toast slides into the corner the Toaster was given. returns the toast's id, which and take.

Usage

tsx

import { Button, useToast } from "@wunderui/react"

export function SaveButton() {
  const toast = useToast()
  return (
    <Button onClick={() => toast.add({ title: "Changes saved", description: "Your profile is up to date.", type: "success" })}>
      Save changes
    </Button>
  )
}

Import

tsx

import { useToast } from "@wunderui/react"

Part of WunderUI Free, in the npm package and the free source.

Signature

useToast<Data>(): UseToastManagerReturnValue<Data>

Returns

Field	Type
toasts	ToastObject<Data>[]
add	<T extends Data = Data>(options: ToastManagerAddOptions<T>) => string
close	(toastId?: string) => void
update	<T extends Data = Data>(toastId: string, options: ToastManagerUpdateOptions<T> \| ((prevToast: ToastObject<T>) => ToastManagerUpdateOptions<T>)) => void
promise	<Value, T extends Data = Data>(promise: Promise<Value>, options: ToastManagerPromiseOptions<Value, T>) => Promise<Value>

Examples

Follow a request

tsx

const toast = useToast()

async function exportReport() {
  await toast.promise(createExport(), {
    loading: { title: "Preparing the export…" },
    success: { title: "Export ready", type: "success" },
    error: { title: "The export failed", description: "Try again in a minute.", type: "error" },
  })
}

Notes

Mount once, high in the tree (the root layout). Without it, has nowhere to render.
sets the colour of the dot: , , or (the default).
Toasts close after 5 seconds. Pass to keep one longer, or to keep it until it is closed.
Use a toast to confirm something that already happened. A decision the user still has to make belongs in a Dialog.

PrevioususeScrollSpy