npm / react-toastify
react-toastify
What changed in react-toastify 6 to 11, from its official release notes, upgrade guides and advisories. Sources checked 2026-10-31.
36 breaking1 security31 new APIs and options1 performance5 behavior and defaults25 fixes and other
See which of these apply to your code, ranked, in your agent:
npx @unstale/cli initreact-toastify 1133 changes
Breaking changes 13
On toast.dismiss(), onChange fires status: 'removed' synchronously instead of after the exit animation; double onClose is also guarded against.
This option is no longer needed.
This option is no longer needed.
Enables a custom progress bar and removes the built-in progress bar while retaining features such as autoClose and pause handling.
This function has been removed because it is no longer needed.
The callback no longer receives children and now receives an optional reason: true for user dismissal or a string supplied through closeToast.
The onClose callback is no longer delayed until the exit animation completes.
The callback no longer receives children; its new signature takes no arguments.
This option has been removed to reduce the API surface; progress bar customization no longer relies on inline style.
The minimal CSS export has been removed.
Scss is no longer used; the library now uses CSS.
The hook is no longer exposed.
The hook is no longer exposed.
Security 1
ToastContainer accepts a nonce prop and applies it to the injected style tag for CSP support.
New APIs and options 8
This ToastContainer prop appends the injected style tag to head instead of prepending it.
The new opt-in value auto follows the OS color scheme via prefers-color-scheme; the default remains light.
Passing false disables enter and exit animations on the container or per toast.
ToastContainer and toast accept ariaLabel for screen readers and testing.
CloseButtonProps is now re-exported.
Custom notification components can pass a reason to closeToast, allowing onClose to distinguish between actions.
ToastContainer accepts a customizable keyboard shortcut matcher; the default Alt+T shortcut focuses the first visible notification for keyboard navigation.
Custom notification components can receive isPaused to determine when to pause progress animation, including on hover or focus loss.
Behavior and default changes 1
The stylesheet is injected automatically, so applications no longer need to import it; the CSS file remains exported.
Fixes and other changes 10
The injected stylesheet is prepended to head again, allowing CSS variable overrides to work without !important.
The stacked container respects mobile 100vw again.
The progressbar role now includes aria-valuenow, aria-valuemin, and aria-valuemax.
Stacked scale is clamped at 0.5 to prevent zero or negative scale in deep stacks.
Releasing a touch drag no longer re-pauses the toast.
Vertical dragging now visually moves the toast because --y gets a unit.
The close button now uses absolute positioning so it does not interfere with notification content.
The newestOnTop behavior has been fixed.
Support for React 19 has been added.
Toast elements have sensible default styling values that can be customized with CSS or associated CSS variables.
react-toastify 1018 changes
Breaking changes 6
The
closeOnClickprop now defaults tofalseinstead oftrue.The
draggableprop now defaults totouch, so notifications are draggable only on touch devices by default.The
enableMultiContainerprop has been removed; containers with an assigned id no longer need it.React 18 is now the minimum required version.
The
toast.POSITIONconstant has been removed.The
toast.TYPEconstant has been removed.
New APIs and options 7
Custom icon logic receives an
isLoadingfield.Add the
stackedprop toToastContainerto enable stacked notifications.Dismiss all toasts in a given container, or dismiss a toast by id within a specific container.
Limit an active-toast check to a specific container by passing its id.
Pause notification timers programmatically, optionally targeting a toast by id or a container.
Play notification timers programmatically, optionally targeting a toast by id or a container.
Customize the opacity of the progress bar's background trail with this CSS variable.
Fixes and other changes 5
TypeScript correctly infers the content of notification data when it is provided.
Fix notifications showing multiple times.
Fix a memory leak that occurred while using multiple containers.
Fix the
onCloseevent triggering twice.Fix
ToastOptionsclassNameoverriding theToastContainertoastClassNameinstead of appending to it.
react-toastify 96 changes
Breaking changes 2
The toast.configure API was removed; it did not work with React context because it creates a new React tree.
The callback now receives a ToastItem with properties such as status, content, id, and data, instead of the number of displayed toasts and containerId.
New APIs and options 1
A headless hook addon lets developers build a notification center on top of react-toastify.
Fixes and other changes 3
Fixed a bug where a success toast on a promise did not disappear when the promise resolved too quickly.
Fixed generic result types for toast.promise when using a custom render method.
Fixed an issue where an updated toast sometimes had incorrect styles.
react-toastify 815 changes
Breaking changes 8
The
toast.TYPE.DARKconstant is no longer available.The
.Toastify__toast--darkCSS class is removed.The
.Toastify__toast--defaultCSS class is removed.The
.Toastify__toast--errorCSS class is removed.The
.Toastify__toast--infoCSS class is removed.The
.Toastify__toast--successCSS class is removed.The
.Toastify__toast--warningCSS class is removed.The
darktoast type is removed; use thethemeoption ortoast.darkinstead.
New APIs and options 5
Adds a
dataoption for passing data to a notification without rendering a React component.Icons can be customized or disabled per toast or globally on
ToastContainer; custom icons can be strings, components, or functions.Separates theme from notification type, with light, dark, and colored themes configurable globally or per notification; use
theme: "colored"for the former type-based colors.Displays a loading notification that you can update yourself with
toast.update.Accepts a promise and updates its notification when the promise resolves or fails, showing a spinner while it is pending.
Behavior and default changes 2
Switches styling to CSS variables, allowing developers to change colors such as the progress bar color.
Notifications of type info, error, warning, and success display an icon by default.
react-toastify 711 changes
Breaking changes 4
The duration parameter was removed; CSS animations now work out of the box.
The dependency on react-transition-group was removed.
The toast timer starts after you click on the toast.
A toastId can no longer be reused.
New APIs and options 2
A way to load the CSS without a CSS loader was added.
You can now specify the swipe direction.
Behavior and default changes 2
The border radius was increased slightly.
CSS animations work out of the box.
Fixes and other changes 3
ID generation was changed.
pauseOnFocusLoss is now applied on the first render.
You can select text inside inputs while a toast is open.
react-toastify 616 changes
Breaking changes 3
className now supports strings only.
The react-transition-group upgrade affects custom transitions.
React 16.8 is required because the release introduces hooks.
New APIs and options 8
ToastContainer can use containerId as its HTML id.
A dark toast style is available.
You can define inline styles on a toast.
You can unsubscribe from the onChange event.
You can limit the number of toasts displayed.
A hook is exposed for creating your own Toast.
A hook is exposed for creating your own ToastContainer.
Toast can use toastId as its HTML id.
Performance 1
The bundle size is smaller.
Fixes and other changes 4
Center positioning is calculated with transform instead of a negative margin-left based on half the toast size.
The close button icon was improved.
Fixes toast progress styles not being used.
The library supports strict mode.