`toast()` API

Use toast() to create, update, dismiss, and remove notifications.

Import

import toast from 'react-stacked-toast/toast';

You can also import toast from the root package:

import { toast } from 'react-stacked-toast';

Available toast options

Per-toast options override matching options received from <Toaster />.

toast({
  title: 'Hello world!',
  description: 'This is a toast notification.',
  duration: 5000,
  icon: '👋',
  style: {
    backgroundColor: '#333',
    color: '#fff',
  },
  className: 'toast-dark',
});

Option	Type	Description
`id`	string	Reuse an existing id to update that toast.
`title`	ReactNode	The title of the toast notification.
`description`	ReactNode	The description of the toast notification.
`duration`	number	The duration of the toast notification in milliseconds. Default is 3000
`icon`	ReactNode	The icon to be displayed in the toast notification.
`style`	CSSProperties	Inline styles for the toast notification.
`className`	string	A class name for the toast notification.

Set duration to Infinity to keep a toast visible until it is dismissed.

Usage

Basic toast

toast('Hello world!');

toast({
  title: 'Hello world!',
});

toast({
  title: (
    <span>
      Custom and <b>bold</b>
    </span>
  ),
});

Built-in types

toast.success({
  title: 'Successfully created!',
});
toast.error({
  title: 'This is an error!',
});
toast.loading({
  title: 'Loading...',
  description: 'We are making a toast.',
});
toast.warning({
  title: 'Overcooked!',
  description: 'Your toast is overcooked!',
});

Custom styling

toast({
  title: 'Why not a dark toast?',
  icon: '👏',
  style: {
    borderRadius: '200px',
    background: '#333',
    color: '#fff',
  },
  className: 'toast-dark',
});

Promise states

const resolveAfter3Sec = new Promise((resolve) => setTimeout(resolve, 3000));
toast.promise(resolveAfter3Sec, {
  loading: { title: 'Loading...', description: 'Waiting for 3 seconds.' },
  success: { title: 'Success!', description: 'Your toast is ready.' },
  error: { title: 'Error!', description: 'Your toast is burnt.' },
});

Dismiss toasts

const toastId = toast({ title: 'Hello world!' });
toast.dismiss(toastId);

toast.dismiss();

Render from the current toast

Pass a function when the content needs access to the generated toast id.

toast((t) => ({
  title: (
    <span>
      Custom and <b>bold</b>
      <button onClick={() => toast.dismiss(t.id)}>Dismiss</button>
    </span>
  ),
}));

Remove all toasts immediately

toast.remove();

toast() API