react-stacked-toast

toast() API

Available toast options

These options will overwrite all options received from <Toaster/>.

toast({
  title: 'Hello world!',
  description: 'This is a toast notification.',
  duration: 5000,
  icon: '👋',
  style: {
    backgroundColor: '#333',
    color: '#fff',
  },
});
OptionsTypeDescription
titleReactNodeThe title of the toast notification.
descriptionReactNodeThe description of the toast notification.
durationnumberThe duration of the toast notification in milliseconds. Default is 3000
iconReactNodeThe icon to be displayed in the toast notification.
styleCSSPropertiesThe custom styles for the toast notification.

Usage

// Make a tost
toast({
  title: 'Hello world!',
});
toast({
  title: (
    <span>
      Custom and <b>bold</b>
    </span>
  ),
});


// Shortcut to 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!',
});
toast.custom({
  title: <div>Hello World</div>,
});


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


// Promise
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 a single toast
const toastId = toast({ title: 'Hello world!' });
toast.dismiss(toastId);


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


// Dismiss all toasts
toast.dismiss();