{"id":11888,"library":"react-toastify","title":"React-Toastify: Highly Customizable Notifications","description":"React-Toastify is a widely adopted library for adding highly customizable, non-blocking notifications, often called \"toasts\" or \"snackbars,\" to React applications. The current stable version is 11.0.5. It maintains an active development cycle, frequently releasing patch and minor updates, with significant major versions (like v10 and v11) introducing substantial architectural changes and feature enhancements. Key differentiators include its ease of integration, comprehensive customization options allowing it to blend into any design system, full RTL support, intuitive swipe-to-close gestures, the ability to render React components within toasts, programmatic toast updates, and a configurable progress bar. Version 11 streamlined setup by automatically injecting its stylesheet, eliminating the need for manual CSS imports. Version 10 involved a significant internal rewrite, improving stability and fixing long-standing issues. It ships with TypeScript types, facilitating robust development.","status":"active","version":"11.0.5","language":"javascript","source_language":"en","source_url":"https://github.com/fkhadra/react-toastify","tags":["javascript","react","notification","toast","react-component","react-toastify","push","alert","snackbar","typescript"],"install":[{"cmd":"npm install react-toastify","lang":"bash","label":"npm"},{"cmd":"yarn add react-toastify","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-toastify","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for React applications.","package":"react","optional":false},{"reason":"Peer dependency for React DOM rendering.","package":"react-dom","optional":false}],"imports":[{"note":"Primary component to render the toast notifications.","wrong":"const ToastContainer = require('react-toastify').ToastContainer;","symbol":"ToastContainer","correct":"import { ToastContainer } from 'react-toastify';"},{"note":"Function to trigger a toast notification. The default export was removed in favor of named exports in earlier major versions.","wrong":"import toast from 'react-toastify/dist/toast'; // Deprecated path\nconst toast = require('react-toastify').toast;","symbol":"toast","correct":"import { toast } from 'react-toastify';"},{"note":"Type definition for configuring toast behavior and appearance. Use `type` import for clarity and bundler optimization.","wrong":"import { ToastOptions } from 'react-toastify'; // Incorrect for type-only import if using older TS or bundlers","symbol":"ToastOptions","correct":"import type { ToastOptions } from 'react-toastify';"}],"quickstart":{"code":"import React, { useState } from 'react';\nimport { ToastContainer, toast } from 'react-toastify';\nimport 'react-toastify/dist/ReactToastify.css'; // Optional since v11, but good for backward compatibility\n\ninterface MyToastData {\n username: string;\n}\n\nfunction App() {\n const [username, setUsername] = useState('');\n\n const notify = () => {\n toast.info(`Hello ${username || 'Guest'}! Welcome.`, {\n position: 'top-right',\n autoClose: 3000,\n hideProgressBar: false,\n closeOnClick: true,\n pauseOnHover: true,\n draggable: true,\n progress: undefined,\n theme: 'light',\n });\n };\n\n const promiseNotify = () => {\n const myPromise = new Promise((resolve, reject) => {\n setTimeout(() => {\n if (Math.random() > 0.5) {\n resolve({ username: 'JaneDoe' });\n } else {\n reject({ err: 'Failed to fetch user' });\n }\n }, 2000);\n });\n\n toast.promise(myPromise, {\n pending: 'Fetching user data...',\n success: {\n render({ data }) {\n return `User ${data?.username} fetched successfully!`;\n }\n },\n error: {\n render({ data }) {\n return `Error: ${data?.err}`;\n }\n }\n }, { autoClose: 5000 });\n };\n\n return (\n
\n

React-Toastify Example

\n setUsername(e.target.value)}\n placeholder=\"Enter your name\"\n style={{ marginRight: '10px', padding: '8px' }}\n />\n \n \n \n
\n );\n}\n\nexport default App;\n","lang":"typescript","description":"This example demonstrates a basic toast notification and a promise-based toast with success/error states, showcasing `ToastContainer` and `toast` utility."},"warnings":[{"fix":"Remove `import 'react-toastify/dist/ReactToastify.css';` from your application entry point or component where it was previously imported.","message":"Starting from v11.0.0, importing the CSS stylesheet (`import 'react-toastify/dist/ReactToastify.css';`) is no longer required as the styles are automatically injected. Keeping the import will result in duplicate styles.","severity":"breaking","affected_versions":">=11.0.0"},{"fix":"Thoroughly test your application after upgrading to v10+ and consult the official documentation or GitHub release notes for any specific migration details. Review custom toast components or options that might be affected.","message":"Version 10.0.0 involved a significant internal rewrite, which may have introduced subtle behavioral changes or require adjustments to highly customized implementations, particularly those relying on undocumented internal structures.","severity":"breaking","affected_versions":">=10.0.0"},{"fix":"Ensure only one `ToastContainer` is rendered in your React application's component tree. If multiple are truly needed, ensure they are mounted and unmounted properly and test extensively.","message":"Using multiple `ToastContainer` components in the same application can lead to unexpected behavior or issues if not managed carefully. While v9.0.7 fixed a specific memory leak, it's generally recommended to have a single `ToastContainer` at the root of your application.","severity":"gotcha","affected_versions":"<9.0.7"},{"fix":"Upgrade to `react-toastify@^9.1.3` or newer to ensure compatibility and correct behavior within React Server Components environments.","message":"Older versions of `react-toastify` might not fully support React Server Components (RSC) as introduced in Next.js App Router. Support was explicitly added in v9.1.3.","severity":"gotcha","affected_versions":"<9.1.3"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure `ToastContainer` is rendered and available in the DOM before `toast` calls are made. Upgrade to `react-toastify@^9.1.3` or newer, which partially addressed this issue.","cause":"This error often occurs when the `toast` function is called before the `ToastContainer` component has been mounted or if there's a hydration mismatch in SSR/SSG contexts, especially in older versions.","error":"Toast is undefined || Uncaught TypeError: Cannot read properties of undefined (reading 'content')"},{"fix":"Upgrade to `react-toastify@^9.0.7` or newer. Ideally, limit your application to a single `ToastContainer` at the root for simpler state management and to avoid potential issues.","cause":"In versions prior to 9.0.7, having multiple `ToastContainer` instances could lead to memory leaks, especially when components unmounted.","error":"Memory leak when multiple containers are used"},{"fix":"Upgrade to `react-toastify@^9.1.2` or newer, which contains a fix for invalid CSS translate issues.","cause":"Prior to v9.1.2, there were issues with invalid CSS `translate` properties affecting toast positioning or animations.","error":"CSS `translate` property not working correctly or invalid CSS"},{"fix":"Upgrade to `react-toastify@^9.0.8` or newer to resolve issues where `autoClose` might not work correctly after updating a toast.","cause":"In versions prior to 9.0.8, updating a toast would sometimes reset or disable the `autoClose` functionality, preventing toasts from automatically dismissing.","error":"AutoClose doesn't work on update for toasts"}],"ecosystem":"npm"}