Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Snyk] Upgrade react-toastify from 9.1.3 to 10.0.5 #2

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

q1blue
Copy link

@q1blue q1blue commented Jul 28, 2024

snyk-top-banner

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.


⚠️ Warning: This PR contains major version upgrade(s), and may be a breaking change.

  • 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 - 2024-03-15

    10.0.5

  • 10.0.4 - 2024-01-21

    10.0.4

  • 10.0.3 - 2024-01-16

    10.0.3

  • 10.0.2 - 2024-01-16

    10.0.2

  • 10.0.2-debug - 2024-01-16

    10.0.2-debug

  • 10.0.1 - 2024-01-15

    10.0.1

  • 10.0.0 - 2024-01-14

    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) 😆.

    stacked

    Screenshot 2023-12-17 at 14 53 50

    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.

    document.addEventListener("visibilitychange", () => {
      if (document.visibilityState === "visible") {
        toast.play({ id: "123" });
      } else {
        toast.pause({ id: "123" });
      }
    });

    More usages:

    • Play/pause all toasts
    toast.play()
    toast.pause()
    • Play/pause all toasts for a given container
    toast.play({ containerId: "123" })
    toast.pause({ containerId: "123" })
    • Play/pause toast that has a given id regardless the container
    toast.play({ id: "123" })
    toast.pause({ id: "123" })
    • Play/pause toast that has a given id for a specific container
    toast.play({ id: "123", containerId: "12" })
    toast.pause({ id: "123", containerId: "12" })

    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.

    • Remove all toasts that belongs to a given container
    toast.dismiss({ container: "123" })
    • Remove toast that has a given id for a specific container
    toast.dismiss({ id: "123", containerId: "12" })

    The method is backward compatible. toast.dismis() and toast.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.

      toast.isActive(toastId, containerId)

    Better typescript inference when using data

    When providing data to the notification, the content of data is correctly infered by typescript.

    toast((props) => {
      return <div>{props.data.foo}</div>
    },{
      data: {
        foo: "bar"
      }
    })

    IconProps now receives isLoading

    When providing your own logic to display the icon, you now have access to the isLoading field.

    const CustomIcon = props => {
    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.

    stacked

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

    <ToastContainer stacked />

    Progress bar background trail

    The progress bar leaves a background trail by default.

    Screenshot 2023-12-17 at 14 53 50

    The opacity of the trail can be customized by overriding the css variable --toastify-color-progress-bgo.

    --toastify-color-progress-bgo: 0;

    // 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 an id assigned then you are good to go.

    // before
    <ToastContainer id="myContainer" enableMultiContainer />

    // now 🎉
    <ToastContainer id="myContainer" />

    The toast.position and toast.type constants have been removed

    The toast.POSITION and toast.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 now false by default instead of true. 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 follow

    <ToastContainer closeOnClick />

    The draggable prop is set to touch by default instead of true. 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 to true.

    <ToastContainer draggable />

    Bug Fixes and Chore

    • Remove defaultProps on ToastContainer as it's deprecated #970
    • Fix className from ToastOptions overrides the toastClassName in ToastContainer props instead of appending #956
    • Rewrite tests using component testing #923
    • Memory leak while using multiple containers are goes on in v9.1.1 #910
    • React toast is showing multiple time. #744
    • onClose event trigger 2 times. #741
  • 10.0.0-beta.1 - 2023-08-04
  • 9.1.3 - 2023-05-14

    Release note

    • Add support for RSC (next app router): #951
    • Partially address Toast is undefined || Uncaught TypeError: Cannot read properties of undefined (reading 'content') #858 #952
    • Bump dependencies
from react-toastify GitHub release notes

Important

  • Warning: This PR contains a major version upgrade, and may be a breaking change.
  • Check the changes in this PR to ensure they won't cause issues with your project.
  • This PR was automatically created by Snyk using the credentials of a real user.

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:

Snyk has created this PR to upgrade react-toastify from 9.1.3 to 10.0.5.

See this package in npm:
react-toastify

See this project in Snyk:
https://app.snyk.io/org/q1blue-rxw/project/723abafa-4490-4d50-a31a-cf65561f5daa?utm_source=github&utm_medium=referral&page=upgrade-pr
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants