toast()
API
Call it to create a toast from anywhere, even outside React. Make sure you add the <Toaster/>
component to your app first.
Available toast options
You can provide ToastOptions
as the second argument. They will overwrite all options received from <Toaster/>
.
toast('Hello World', {duration: 4000,position: 'top-center',// Stylingstyle: {},className: '',// Custom Iconicon: '👏',// Change colors of success/error/loading iconiconTheme: {primary: '#000',secondary: '#fff',},// AriaariaProps: {role: 'status','aria-live': 'polite',},// Custom props that can be retrieve from `toast` ObjectcustomProps: {someCustomValue: 'Hello there general Custom Props',},});
Creating a toast
Blank
toast('Hello World');
The most basic variant. It does not have an icon by default, but you can provide one via the options. If you don't want any default styles, use toast.custom()
instead.
Success
toast.success('Successfully created!');
Creates a notification with an animated checkmark. It can be themed with the iconTheme
option.
Error
toast.error('This is an error!');
Creates a notification with an animated error icon. It can be themed with the iconTheme
option.
Custom (JSX)
toast.custom(<div>Hello World</div>);
Creates a custom notification with JSX without default styles.
Loading
toast.loading('Waiting...');
This will create a loading notification. Most likely, you want to update it 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 automatically 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: '🔥',},});
Default durations
Every type has its 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 |
custom | 4000 |
loading | Infinity |
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 instantly
toast.remove(toastId);// ortoast.remove();
Update an existing toast
Each toast call returns a unique id. Use in the toast options to update the existing toast.
const toastId = toast.loading('Loading...');// ...toast.success('This worked', {id: toastId,});
Prevent duplicate toasts
To prevent duplicates of the same kind, you can provide a unique permanent id.
toast.success('Copied to clipboard!', {id: 'clipboard',});
Render JSX custom content
You can provide a React component instead of text. If you don't want any default styles use toast.custom()
instead.
toast(<span>Custom and <b>bold</b></span>,{icon: <Icon />,});
You can also supply a function that receives the Toast
as an argument, giving you access to all properties. This allows you to access the toast id, which can be used to add a dismiss button.
toast((t) => (<span>Custom and <b>bold</b><button onClick={() => toast.dismiss(t.id)}>Dismiss</button></span>),{icon: <Icon />,});