[Snyk] Upgrade react-toastify from 9.1.3 to 10.0.5 #2
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.
Snyk has created this PR to upgrade react-toastify from 9.1.3 to 10.0.5.
ℹ️ Keep your dependencies up-to-date. This makes it easier to fix existing vulnerabilities and to more quickly identify and fix newly disclosed vulnerabilities when they affect your project.
The recommended version is 8 versions ahead of your current version.
The recommended version was released on 4 months ago.
Release notes
Package name: react-toastify
10.0.5
10.0.4
10.0.3
10.0.2
10.0.2-debug
10.0.1
What is new in v10
The code for this release has been sitting on my computer for almost a year but with so many things going on it was hard for me to release it but it's finally there! A good chunk of the code has been rewritten, a bunch of bugs have been fixed. I've also addressed the oldest open feature request (Jan 10, 2020) 😆.
Features
Play or pause the timer programmatically
By default, when the notification is hovered or the window loses focus, the timer for dismissing the notification is paused. There are many other situations where you might want to pause the timer as well. For instance, consider wanting to toggle the notification timer based on the document's visibility. This wasn't possible to do previously, but with the new API, it's a breeze.
More usages:
Remove notification from a given container
This feature was the oldest one in the backlog (Jan 10, 2020). I don't know if the user who requested this feature is still using the library but I bet thanks to her/him, a bunch of user will be happy.
The method is backward compatible.
toast.dismis()
andtoast.dismiss("123")
work as usual.Check if a notification is active for a given container
You can limit the call to
toast.isActive
to a specific container.Better typescript inference when using data
When providing data to the notification, the content of data is correctly infered by typescript.
IconProps now receives isLoading
When providing your own logic to display the icon, you now have access to the
isLoading
field.if (props.isLoading) return <Spinner />;
switch (props.type) {
case 'info':
return <Info color={iconColor} />;
case 'success':
return <Success color={iconColor} />;
case 'error':
return <Error color={iconColor} />;
case 'warning':
return <Warning color={iconColor} />;
default:
return undefined;
}
};
<ToastContainer icon={CustomIcon} />
Stacked Notifications
The initial release for this feature was planned right after the release of the v9. The code was their but things happen in life and I wasn't able to focus on the project that much.
That being said, I'm glad to finally release it.
To enable it, add the
stacked
prop to theToastContainer
. I also suggest to disable the progress bar :).Progress bar background trail
The progress bar leaves a background trail by default.
The opacity of the trail can be customized by overriding the css variable
--toastify-color-progress-bgo
.// increase the opacity
--toastify-color-progress-bgo: .8;
Breaking Changes
React 18 is the minimum required version, but...
The minimun version of react required is now
18
. This version has been released for more than a year. Nextjs, react-query already did this move as well, so I believe it's a good time for the library as well.That being said, I know that not all code base have the chance to be running on the latest version of react, so I'm considering to have a package for
v17
if the demand is high enough.The enableMultiContainer prop has been removed
The
enableMultiContainer
props is not needed anymore and has been removed. As long as your container has anid
assigned then you are good to go.<ToastContainer id="myContainer" enableMultiContainer />
// now 🎉
<ToastContainer id="myContainer" />
The toast.position and toast.type constants have been removed
The
toast.POSITION
andtoast.TYPE
constants have been removed. Typescript came a long way since the initial release of the library. The ecosystem has matured to a point where such constants are not needed anymore.Change for some defaults
The
closeOnClick
prop is nowfalse
by default instead oftrue
. When using the library I keep on turning this feature off which make me realize that it was not a good default in the first place. To turn it on do as followThe
draggable
prop is set totouch
by default instead oftrue
. Which means that, by default, notifications are only draggable on touch devices (most likely mobiles and tablets). While swipping a notification on mobile feels natural, dragging on desktop is not. If you want your notification to be draggable regardless of the device type just set draggable totrue
.Bug Fixes and Chore
Release note
Toast is undefined || Uncaught TypeError: Cannot read properties of undefined (reading 'content')
#858 #952Important
Note: You are seeing this because you or someone else with access to this repository has authorized Snyk to open upgrade PRs.
For more information: