`toast()` API

Call it to create a toast from anywhere, even outside React. Make sure you add the <Toaster/> component to your app first.

Blank

toast('Hello World');

The most basic variant. It does not have an icon by default, but you can provide one via the options.

Success

toast.success('Successfully created!');

Creates a notification with an animated checkmark. It can be themed with iconTheme.

Error

toast.error('This is an error!');

Creates a notification with an animated error icon. It can be themed with iconTheme.

Loading

toast.loading('Waiting...');

This will create a loading notification. Most likely you want to update it manually afterwards. For a friendly alternative, check out toast.promise(), which takes care of that automatically.

Promise

This shorthand is useful for mapping a promise to a toast. It will update automtically when the promise resolves or fails.

Simple Usage

const myPromise = fetchData();
toast.promise(myPromise, {
  loading: 'Loading',
  success: 'Got the data',
  error: 'Error when fetching',
});

It's recommend to add min-width to your toast.promise() calls to prevent jumps from different message lengths.

Advanced

You can provide a function to the success/error messages to incorporate the result/error of the promise. The third argument are toastOptions similiar to <Toaster />

toast.promise(
  myPromise,
  {
    loading: 'Loading',
    success: (data) => `Successfully saved ${data.name}`,
    error: (err) => `This just happened: ${err.toString()}`,
  },
  {
    style: {
      minWidth: '250px',
    },
    success: {
      duration: 5000,
      icon: '🔥',
    },
  }
);

Available options

You can provide ToastOptions as second argument. They will overwrite all options received from <Toaster/>.

toast('Hello World', {
  duration: 4000,
  // Styling
  style: {},
  className: '',
  // Custom Icon
  icon: '👏',
  // Change colors of success/error/loading icon
  iconTheme: {
    primary: '#000',
    secondary: '#fff',
  },
  // Aria
  role: 'status',
  ariaLive: 'polite',
});

Default durations

Every type has their own duration. You can overwrite them duration with the toast options. This can be done per toast options or globally by the <Toaster/>.

type	duration
`blank`	4000
`error`	4000
`success`	2000
`loading`	30000

Dismiss toast programmatically

You can manually dismiss a notification with toast.dismiss. Be aware that it triggers the exit animation and does not remove the Toast instantly. Toasts will auto-remove after 1 second by default.

Dismiss a single toast

const toastId = toast.loading('Loading...');
// ...
toast.dismiss(toastId);

You can dismiss all toasts at once, by leaving out the toastId.

Dismiss all toasts at one

toast.dismiss()

To remove toasts instantly without any animations, use toast.remove.

Remove toasts instanstly

toast.remove(toastId)
// or
toast.remove()

Update an existing toast

const toastId = toast.loading('Loading...');
// ...
toast.success('This worked', {
  id: toastId,
});

Render JSX custom content

You can provide a React components instead of text.

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

You can also supply a function that receives the Toast as argument. This can be usefull to add a custom dismiss button.

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

toast() API