Never heard of react-toastify before? Go check the demo
What is new in v11
I’m super excited about this release! The main focus was on customization, and my goal was to empower you (and myself) so you can fully personalize the look and feel for the notifications.
In short, react-toastify should be able to blend into any design system.
No need to import the css file anymore
The stylesheet is now injected automatically, so you no longer need to import it. The CSS file is still exported by the library.
import { ToastContainer, toast } from 'react-toastify';
function App(){
const notify = () => toast("Wow so easy !");
return (
<div>
<button onClick={notify}>Notify !</button>
<ToastContainer />
</div>
);
}
Easy customization!
One of the top requests has been how to customize notifications. To be fair, until this release, it was quite challenging because it required users to override numerous CSS classes.
I’ve simplified the DOM structure of the notification by removing extraneous div elements, nested elements, etc... It’s a significant breaking change, but it’s truly worth the effort. I can confidently say that the library can now seamlessly integrate into any design system.
Below, I’ve implemented a couple of different designs using only Tailwind. I didn’t override a single CSS class from react-toastify 🤯!
Head to stackblitz to check the code.
How does it work in practice? On the left side, we have the old DOM structure vs the new one on the right side.
Toastify__toast-bodyand its child are now completely gone.- The
CloseButtonnow uses an absolute position.
Thanks to those changes, nothing will interfere with your content.
Toastify__toast has some sensible default values(e.g., border-radius, shadow, etc...) that can be customized using css or by updating the associated css variables:
width: var(--toastify-toast-width);
min-height: var(--toastify-toast-min-height);
padding: var(--toastify-toast-padding);
border-radius: var(--toastify-toast-bd-radius);
box-shadow: var(--toastify-toast-shadow);
max-height: var(--toastify-toast-max-height);
font-family: var(--toastify-font-family);
Custom progress bar
Allowing a custom progress bar wasn’t on my to-do list at all while working on this release. But seeing how easy it is to customize notifications now, I couldn’t resist 😆.
The best part is that you don’t have to compromise on features like autoClose, pauseOnHover,pauseOnFocusLoss, or even a controlled progress bar—it just works seamlessly for you.
Here is a small gist.
function App() {
const notify = () => {
toast(CustomComponent, {
autoClose: 8000,
// removes the built-in progress bar
customProgressBar: true
});
};
return (
<div>
<button onClick={notify}>notify</button>
<ToastContainer />
</div>
);
}
// isPaused is now available in your component
// it tells you when to pause the animation: pauseOnHover, pauseOnFocusLoss etc...
function CustomComponent({ isPaused, closeToast }: ToastContentProps) {
return (
<div>
<span>Hello</span>
<MyCustomProgressBar isPaused={isPaused} onAnimationEnd={() => closeToast()} />
</div>
);
}
Head to stackblitz for a live example.
Accessibility and keyboard navigation
ToastContainer and toast accept an ariaLabel prop(finally...). This is quite helpful for screen readers and also for testing.
For example, in cypress you could do cy.findByRole("alert", {name: "the aria label you specified"}).
toast("hello", {
ariaLabel: "something"
})
If a notification is visible and the user presses alt+t it will focus on the first notification allowing the user to use Tab to navigate through the different elements within the notification.
The hotKeys can be changed of course.
// focus when user presses ⌘ + F
const matchShortcut = (e: KeyboardEvent) => e.metaKey && e.key === 'f'
<ToastContainer hotKeys={matchShortcut} ariaLabel="Notifications ⌘ + F" />
Notification removal reason with onClose callback
Do you want to know whether the user closed the notification or if it closed automatically? Rest assured, this is now possible!
The signature of the onClose callback is now onClose(reason?: boolean | string) => void.
When the user closes the notification, the reason argument is equal to true. In the example below, I've named my argument
removedByUser to make the intent clear.
toast("hello", {
onClose(removedByUser){
if(removedByUser) {
// do something
return
}
// auto close do something else
}
})
If you are using a custom component for your notification, you might want more control over the reason, especially if it contains
multiple call to actions.
import { ToastContentProps } from "react-toastify";
function CustomNotification({closeToast}: ToastContentProps) {
return <div>
You received a new message
<button onClick={() => closeToast("reply")}>Reply</button>
<button onClick={() => closeToast("ignore")}>Ignore</button>
</div>
}
toast(CustomNotification, {
onClose(reason){
switch (reason) {
case "reply":
// navigate to reply page for example or open a dialog
case "ignore":
// tell the other user that she/he was ghosted xD
default:
// 🤷♂️
}
}
})
💥 Breaking Changes
useToastContainer and useToast no longer exposed
Those hooks are unusable unless you deep dive in react-toastify source code to understand how to glue things together. This is not what I want for my users, it was a bad decision to expose them in the first place, I've learned a good lesson.
onClose and onOpen no longer receive children props
In hindsight, I should never have done this. The feature is practically not used. Below the new signature for each callback:
onOpen: () => voidonClose: (reason?: boolean | string) => void
Styling
react-toastify/dist/ReactToastify.minimal.csshas been removed.- Scss is out of the picture now. The library uses good old css.
bodyClassNameandbodyStyleare no longer needed.
progressBarStylein order to reduce the api surface. They are now better way to customize everything without relying on inline style.
injectStylehas been removed. This function is no longer needed.- The css class
Toastify__toast-bodyand its direct child have been removed.
🐞 Bug Fixes
- add support for react19 #1177 #1185
- reexport CloseButtonProps #1165
- fix newestOnTop for real this time #1176
- no longer throw this ugly error: Cannot set properties of undefined (setting 'toggle') #1170
- onClose callback is no longer delayed until the exit animation completes #1179
🔮What's next?
I'm gradually rewriting part of the documentation. I've created a collection on stackblitz, this way you can find all the examples in one place. I'll keep adding more examples as I go.
