[Snyk] Upgrade react-toastify from 8.0.0 to 8.2.0

[Ankan-cyber]

Snyk has created this PR to upgrade react-toastify from 8.0.0 to 8.2.0.

ℹ️ 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 7 versions ahead of your current version.

• The recommended version was released 4 years ago.

Release notes

Package name: react-toastify

• 8.2.0 - 2022-02-14
  

  Release note

  • add deprecation notice for toast.configure.
  • add deprecation notice for toast.onChange. API for this method will change in the next major release

  🕷 Bugfixes

  • fix #707 Promise toast does not close automatically if promise resolves too quickly

  ⚙️ Chore

  • bump parcel to latest version
• 8.1.1 - 2022-02-01
  

  Release notes

  🕷 Bug fixes

  • fix #702 autoClose duration start after the entrance animation finish
  • fix #689 prevents promise without success to hang on to the pending state
  • fix #645 and #618 onClose now work as expected!
  • fix #694 Fix error in Chrome: remove preventDefault from passive listener

  ⚙️ Chore

  • #703 the ToastPromiseParams is now exported
  • exit animation on safari are not conflicting with drag transition anymore

  Thanks to @ 03c, @ wilson-webdev, @ essential-randomness for their contributions

• 8.1.0 - 2021-11-03
  

  Release notes

  🚀 Features

  • add support for optional stages in promise #646
• 8.0.3 - 2021-09-24
  

  Release notes

  🐞 Bugfixes

  • fix text-align has not effect on content #657
  • fix disabling icon individually #658
  • fix tree shaking #641
• 8.0.2 - 2021-08-30
  

  Release Notes

  Bugfix

  • fix #635 Icon on safari not displayed
• 8.0.2-with-side-effects - 2021-08-31
• 8.0.1 - 2021-08-27
  

  Release notes

  Features

  • toast.promise accept function that returns a promise.
• 8.0.0 - 2021-08-26
  

  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 👌.

  

  🚀 Features

  New look

  Notifications of different types (toast.info, toast.error, toast.success, 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.

  toast("Default toast behavior is untouched, no icon to display");
  toast.info("Lorem ipsum dolor"); // same as toast(message, {type: "info"});
  toast.error("Lorem ipsum dolor")
  toast.success("Lorem ipsum dolor")
  toast.warn("Lorem ipsum dolor")
  toast.error("Without icon", {
    icon: false
  });
  toast.success("You can provide any string", {
    icon: "🚀"
  });
  // custom icons have access to the theme and the toast type
  toast.success("And of course a component of your choice", {
    icon: MyIcon
  });
  toast.success("Even a function, given you return something that can be rendered", {
    icon: ({theme, type}) =>  <img src="url"/>
  });
  //Disable icons
  <ToastContainer icon={false} />

  Clear separation between type and theme

  Prior to v8, toast.info, toast.error, etc... Would display respectively a blue notification, a red notification, etc... This is not the case anymore. There are 3 distinct themes: light, dark, colored. The theme can be applied globally or per notification.

  //Set the theme globally
  <ToastContainer theme="dark" />

  // define per toast
  toast.info("Display a dark notification of type info");
  toast.info("Display a light notification of type info", { theme: "light" });
  toast.info("Display a blue notification of type info", { theme: "colored" });

  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

  const resolveAfter3Sec = new Promise(resolve => setTimeout(resolve, 3000));
  toast.promise(
      resolveAfter3Sec,
      {
        pending: 'Promise is pending',
        success: 'Promise resolved 👌',
        error: 'Promise rejected 🤯'
      }
  )

  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.

  const resolveWithSomeData = new Promise(resolve => setTimeout(() => resolve("world"), 3000));
  toast.promise(
      resolveAfter3Sec,
      {
        pending: 'Promise is pending',
        success: {
          render({data}){
            return `Hello ${data}`
          },
          // other options
          icon: "🟢",
        },
        error: {
          render({data}){
            // When the promise reject, data will contains the error
            return <MyErrorComponent message={data.message} />
          }
        }
      }
  )

  If you want to take care of each step yourself you can use toast.loading and update the notification yourself.

  const id = toast.loading("Please wait...")
  //do something else
  toast.update(id, { render: "All is good", type: "success" });

  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.

  toast(({data}) => `Hello ${data}`, {
    data: "world"
  })

  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

  :root{
    // this is the default value below
    --toastify-color-progress-light: linear-gradient(
      to right,
      #4cd964,
      #5ac8fa,
      #007aff,
      #34aadc,
      #5856d6,
      #ff2d55
    );
  }

  You can find the list of all exposed variables here

  💥 Breaking changes

  There are few breaking changes.

  • The separation between theme and type. The type dark has been removed
  // before v8
  toast("hello", {
  type: "dark"
  })
  // toast.TYPE.DARK is no longer available

  // in v8
  toast("hello", {
  theme: "dark"
  })
  // or
  toast.dark("hello")

  • Notifications of different types are not colored by default, but they look pretty by default now 😆. You can use the colored theme to get the same behavior as the previous version

  toast.info("hello", {
    theme: "colored"
  })
  // or apply the theme globally
  <ToastContainer theme="colored" />

  • An icon is displayed by default for the notificaiton of type info, error, warning, success
  // to opt-out gloablly from this behavior
  <ToastContainer icon={false} />

  // or per toast
  toast.info("hello", {
  icon: false
  });

  • the following css classes has been removed

  .Toastify__toast--dark {
  }
  .Toastify__toast--default {
  }
  .Toastify__toast--info {
  }
  .Toastify__toast--success {
  }
  .Toastify__toast--warning {
  }
  .Toastify__toast--error {
  }

  ⚙️ Chore

  • update all dependencies

  That's it for this release. Thank you for using react-toastify and happy coding!

from react-toastify GitHub release notes

---

Important

• 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:

• 🧐 View latest project report
• 📜 Customise PR templates
• 🛠 Adjust upgrade PR settings
• 🔕 Ignore this dependency or unsubscribe from future upgrade PRs