[deps]: Update react-toastify to v11 #61
Open
+8
−8
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR contains the following updates:
10.0.5
->11.0.2
Release Notes
fkhadra/react-toastify (react-toastify)
v11.0.2
Compare Source
v11.0.1
Compare Source
v11.0.0
: v11Compare Source
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.
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 🤯!
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-body
and its child are now completely gone.CloseButton
now 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: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.
Accessibility and keyboard navigation
ToastContainer
andtoast
accept anariaLabel
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"})
.If a notification is visible and the user presses
alt+t
it will focus on the first notification allowing the user to useTab
to navigate through the different elements within the notification.The
hotKeys
can be changed of course.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 nowonClose(reason?: boolean | string) => void
.When the user closes the notification, the
reason
argument is equal totrue
. In the example below, I've named my argumentremovedByUser
to make the intent clear.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.
💥 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: () => void
onClose: (reason?: boolean | string) => void
Styling
react-toastify/dist/ReactToastify.minimal.css
has been removed.bodyClassName
andbodyStyle
are no longer needed.progressBarStyle
in order to reduce the api surface. They are now better way to customize everything without relying on inline style.injectStyle
has been removed. This function is no longer needed.Toastify__toast-body
and its direct child have been removed.🐞 Bug Fixes
🔮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.
I've been maintaining react-toastify for more than 8 years. If your company depends on it, consider contributing to its continued development and maintenance. Open-source software thrives with community support, and funding helps ensure we(the maintainers) can keep improving and innovating.
Every contribution, big or small, makes a difference and is greatly appreciated.
v10.0.6
Compare Source
Configuration
📅 Schedule: Branch creation - "every 2nd week starting on the 2 week of the year before 4am on Monday" (UTC), Automerge - At any time (no schedule defined).
🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.
♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.
🔕 Ignore: Close this PR and you won't be reminded about this update again.
This PR was generated by Mend Renovate. View the repository job log.