Guides

📄️ Use Your Own Component

You can render any valid ReactNode: string, number, component... This let you customize the look and feel of the notifications quite easily.

📄️ How to style ✨

Read first Use your own component if you haven't

📄️ Positioning toast

By default, all the toasts will be positioned on the top right of your browser. If a position is set on a toast, the one defined on ToastContainer will be replaced.

📄️ Handling autoClose

The autoClose prop accept a duration in milliseconds or false.

📄️ Remove toast programmatically

An id is returned each time you display a toast, use it to remove a given toast programmatically by calling toast.dismiss(id)

📄️ Handling promise

toast.promise

📄️ Callbacks and closure reason ✨

You can define two callbacks. Their names are self-explanatory:

📄️ Icons

Built-in icons

📄️ Replace the default transition

There are 4 built-in transitions provided.

📄️ Define a custom transition

When it comes to animation the possibility are endless and it doesn't need to be complicated! Starting v7, css animations just works out of the box!

📄️ Use a custom id

A custom toastId can be used to replace the one generated. You can provide a number or a string.

📄️ Accessibility ✨

By default, all toasts are displayed with the ARIA role alert. This can be changed globally or per toast.

📄️ Pause toast timer when the window loses focus

The default behavior is to pause the toast timer whenever the window loses focus. You can opt-out by setting the pauseOnFocusLoss props to false.

📄️ Prevent duplicate

There are two ways to prevent duplicates toast. Use the one that fits your use case 👌.

📄️ Delay notification appearance

You can delay the notification appearance as shown below. Under the hood, the library simply uses setTimeout for you.

📄️ Limit the number of toast displayed

Notifications are useful to get the attention of the user. But displaying too many of them can also be counterproductive.

📄️ Use a controlled progress bar

Imagine you want to see the progress of a file upload. The example below features axios, but it works with anything!

📄️ Update a toast

When you update a toast, the toast options and the content are inherited but don't worry you can update them as well.

📄️ Listen for changes

If you want to know when a toast is added, updated or removed, toast expose a onChange method. When called a function to unsubscribe is returned. The callback will receive a ToastItem. The item provides a bunch of useful properties status, content, id, data, etc...

📄️ Use a custom close button or remove it

Override the default one

📄️ Add an undo action to a toast (like Google Drive)

📄️ Usage with redux

"Talk is cheap. Show me the code."

📄️ Drag to remove

You can drag the toast to remove it. By default, the notifications are only draggable on touch devices.

📄️ Enable right to left support

React-toastify has built-in support for RTL layout. When rendering your ToastContainer all you need to do is to set the rtl prop to true.

📄️ Dispatch toast outside of react component

The toast emitter is just a regular Javascript object, nothing less nothing more. You can dispatch notification from almost anywhere.

📄️ Play or pause the notification timer programmatically

By default, when you hover the notification or the window loses focus, the timer to dismiss the notification is paused. There are many more cases where you might want to pause the timer as well.

📄️ Stacked Notifications

To enable it, add the stacked prop to the ToastContainer. I also suggest to disable the progress bar :).

📄️ Multi containers

Think twice before reaching out to multiple containers. I personally advise against it, it leads to brittle code, and it's very error-prone.