Update dependency react-toastify to v11

[renovate]

This PR contains the following updates:

Package	Change	Age	Confidence
react-toastify	^10.0.0 → ^11.0.0

---

Release Notes

fkhadra/react-toastify (react-toastify)

v11.1.0

Compare Source

Release Notes

Features

• CSP nonce support. <ToastContainer nonce={...}> applies the nonce to the
  injected <style> tag. Closes #​1209.

Fixes

• onChange fires status: 'removed' synchronously on toast.dismiss() instead
  of after the exit animation — observers (incl. useNotificationCenter) now
  see correctly ordered events. Also guards against double-onClose. Closes #​1275.
• Touch drag no longer re-pauses the toast on release — the old check compared a
  PointerEvent against 'touchend', which never matched. Closes #​1217.
• Vertical drag now visually moves the toast (--y gets a unit). Thanks
  @​janpaepke, #​1277.
• Stacked scale is clamped at 0.5, preventing zero/negative scale in deep
  stacks. Closes #​1171, #​1174.
• Stacked container respects mobile 100vw again. Closes #​1234.

Accessibility

• role="progressbar" now includes aria-valuenow, aria-valuemin, aria-valuemax.
  Thanks @​singhankit001, #​1283. Closes #​1259.

Internal

• Migrated to a pnpm workspace (pnpm link . no longer required for contributors).
  Publish layout unchanged — addon still ships inside the main package.
• CSS now injected at mount via useStyleSheet (prerequisite for nonce).
• Dep bumps: TypeScript 6, Vite 8, Cypress 15, React 19.2, plus the rest.
• CI: upload-artifact v3 → v4.

Thanks to @​janpaepke, @​singhankit001, and reporters of the fixed issues.

v11.0.5

Compare Source

v11.0.4

Compare Source

v11.0.3

Compare Source

• fix: remove margin on mobile
• export ToastIcon type

v11.0.2

Compare Source

• fix: export unstyled

v11.0.1

Compare Source

• fix: width on mobile #​1187

v11.0.0: v11

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

  import { ToastContainer, toast } from 'react-toastify';

  function App(){
    const notify = () => toast("Wow so easy !");

    return (
      <div>
        <button onClick={notify}>Notify !</button>
        <ToastContainer />
      </div>
    );
  }

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 🤯!

[!NOTE]
Head to stackblitz to check the code.

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

width: var(--toastify-toast-width);
min-height: var(--toastify-toast-min-height);
padding: var(--toastify-toast-padding);
border-radius: var(--toastify-toast-bd-radius);
box-shadow: var(--toastify-toast-shadow);
max-height: var(--toastify-toast-max-height);
font-family: var(--toastify-font-family);

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.

function App() {
  const notify = () => {
    toast(CustomComponent, {
      autoClose: 8000,
      // removes the built-in progress bar
      customProgressBar: true
    });
  };

  return (
    <div>
      <button onClick={notify}>notify</button>
      <ToastContainer />
    </div>
  );
}

// isPaused is now available in your component
// it tells you when to pause the animation: pauseOnHover, pauseOnFocusLoss etc...
function CustomComponent({ isPaused, closeToast }: ToastContentProps) {
  return (
    <div>
      <span>Hello</span>
      <MyCustomProgressBar isPaused={isPaused} onAnimationEnd={() => closeToast()} />
    </div>
  );
}

[!NOTE]
Head to stackblitz for a live example.

Accessibility and keyboard navigation

ToastContainer and toast accept an ariaLabel 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"}).

toast("hello", {
  ariaLabel: "something"
})

If a notification is visible and the user presses alt+t it will focus on the first notification allowing the user to use Tab to navigate through the different elements within the notification.

The hotKeys can be changed of course.

// focus when user presses ⌘ + F
const matchShortcut = (e: KeyboardEvent) => e.metaKey && e.key === 'f'

<ToastContainer hotKeys={matchShortcut} ariaLabel="Notifications ⌘ + F" />

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 now onClose(reason?: boolean | string) => void.

When the user closes the notification, the reason argument is equal to true. In the example below, I've named my argument
removedByUser to make the intent clear.

toast("hello", {
  onClose(removedByUser){
    if(removedByUser) {
      // do something
      return
    }

    // auto close do something else
  }
})

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.

import { ToastContentProps } from "react-toastify";

function CustomNotification({closeToast}: ToastContentProps) {
  return <div>
      You received a new message
      <button onClick={() => closeToast("reply")}>Reply</button>
      <button onClick={() => closeToast("ignore")}>Ignore</button>
    </div>
}

toast(CustomNotification, {
  onClose(reason){
    switch (reason) {
      case "reply":
        // navigate to reply page for example or open a dialog
      case "ignore":
        // tell the other user that she/he was ghosted xD
      default:
        // 🤷‍♂️
    }
  }
})

💥 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.
• Scss is out of the picture now. The library uses good old css.
• bodyClassName and bodyStyle 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.
• The css class Toastify__toast-body and its direct child have been removed.
  

🐞 Bug Fixes

• add support for react19 #​1177 #​1185
• reexport CloseButtonProps #​1165
• fix newestOnTop for real this time #​1176
• no longer throw this ugly error: Cannot set properties of undefined (setting 'toggle') #​1170
• onClose callback is no longer delayed until the exit animation completes #​1179

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

• GitHub Sponsorship
• Open Collective

---

Configuration

📅 Schedule: (in timezone Europe/Madrid)

• Branch creation
  • Only on Saturday (* * * * 6)
• Automerge
  • At any time (no schedule defined)

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Whenever PR is behind base branch, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about this update again.

---

• If you want to rebase/retry this PR, check this box

---

This PR was generated by Mend Renovate. View the repository job log.

[netlify]

✅ Deploy Preview for voluble-crisp-6e2a75 ready!

Name	Link
🔨 Latest commit	05046d9
🔍 Latest deploy log	https://app.netlify.com/projects/voluble-crisp-6e2a75/deploys/69e54ba89055470008f90a1c
😎 Deploy Preview	https://deploy-preview-434--voluble-crisp-6e2a75.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.