React-toastify has been around for 5 years(will turn five the 8 November 🎂). Since the beginning, one of the goals was to provide a library that is highly customizable and also able to work out of the box. Every major release introduces breaking changes but this is for the best 👌.
What is new in v8
A video is worth a thousand words.
Who doesn't like icons
Let's break down what is happening in the video above. Notifications of different types (
toast.warning) display an icon associated with the selected type. You can also notice that the progress bar color matches the type color.
Don't be afraid 😱, if you don't like those icons you can use your own or remove them. This is what it looks like in practice.
Clear separation between type and theme
Prior to v8,
toast.error, etc... Would display respectively a blue notification, a red notification, etc... This is not the case anymore. There are 3 distinct themes:
colored. The theme can be applied globally or per notification.
This separation will benefit theming in the future.
I promise this is new, I'll tell you if you await
The library exposes a
toast.promise function. Supply a promise and the notification will be updated if it resolves or fails. When the promise is pending a spinner is displayed. Again you hide it, I bet you already know how to😆.
Let's start with a simple example
Displaying a simple message is what you would want to do in 90% of cases. But what if the message you want to display depends on the promise response, what if you want to change some options for the error notification? Rest assured, under the hood, the library uses
toast.update. Thanks to this, you have full control over each notification.
Because you have the full power of
toast.update, you can even supply a custom transition if you want 🤯
If you want to take care of each step yourself you can use
toast.loading and update the notification yourself.
Pass data even when you are not rendering a react component
One way to pass data to the notification was to use the context api or provide your own component. Starting v8 a
data option is now available to make it easier.
I just want to change few colors
Most of the time, users are ok with the default style, they just want to change some colors to match their brand. I think one way to improve the DX for all of us is to embrace CSS variables. That's why the library has switched to css variables! All you want is to change the color of the progress bar? No problem
You can find the list of all exposed variables here
There are few breaking changes.
- The separation between theme and type. The type
darkhas been removed
- Notifications of different types are not colored by default, but they look pretty by default now 😆. You can use the
coloredtheme to get the same behavior as the previous version
- An icon is displayed by default for the notificaiton of type
- the following css classes has been removed
That's it for this release. Thank you for using react-toastify and happy coding!