Registry / web-framework / react-toastify

react-toastify

library11.0.5jsnpmunverified

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.

web-framework communication observability

npm install react-toastify

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · REACT-TOASTIFY

react-toastify

web-frameworkjavascriptv11.0.5

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

ToastContainer

✓ import { ToastContainer } from 'react-toastify';

✗ const ToastContainer = require('react-toastify').ToastContainer;

Primary component to render the toast notifications.

toast

✓ import { toast } from 'react-toastify';

✗ import toast from 'react-toastify/dist/toast'; // Deprecated path const toast = require('react-toastify').toast;

Function to trigger a toast notification. The default export was removed in favor of named exports in earlier major versions.

ToastOptions

✓ import type { ToastOptions } from 'react-toastify';

✗ import { ToastOptions } from 'react-toastify'; // Incorrect for type-only import if using older TS or bundlers

Type definition for configuring toast behavior and appearance. Use `type` import for clarity and bundler optimization.

This example demonstrates a basic toast notification and a promise-based toast with success/error states, showcasing `ToastContainer` and `toast` utility.

import React, { useState } from 'react'; import { ToastContainer, toast } from 'react-toastify'; import 'react-toastify/dist/ReactToastify.css'; // Optional since v11, but good for backward compatibility interface MyToastData { username: string; } function App() { const [username, setUsername] = useState(''); const notify = () => { toast.info(`Hello ${username || 'Guest'}! Welcome.`, { position: 'top-right', autoClose: 3000, hideProgressBar: false, closeOnClick: true, pauseOnHover: true, draggable: true, progress: undefined, theme: 'light', }); }; const promiseNotify = () => { const myPromise = new Promise<MyToastData>((resolve, reject) => { setTimeout(() => { if (Math.random() > 0.5) { resolve({ username: 'JaneDoe' }); } else { reject({ err: 'Failed to fetch user' }); } }, 2000); }); toast.promise(myPromise, { pending: 'Fetching user data...', success: { render({ data }) { return `User ${data?.username} fetched successfully!`; } }, error: { render({ data }) { return `Error: ${data?.err}`; } } }, { autoClose: 5000 }); }; return ( <div style={{ padding: '20px' }}> <h1>React-Toastify Example</h1> <input type="text" value={username} onChange={(e) => setUsername(e.target.value)} placeholder="Enter your name" style={{ marginRight: '10px', padding: '8px' }} /> <button onClick={notify} style={{ padding: '10px 15px', cursor: 'pointer' }}>Show Basic Toast</button> <button onClick={promiseNotify} style={{ marginLeft: '10px', padding: '10px 15px', cursor: 'pointer' }}>Show Promise Toast</button> <ToastContainer /> </div> ); } export default App;

Debug

Known issues

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

fix

Remove `import 'react-toastify/dist/ReactToastify.css';` from your application entry point or component where it was previously imported.

affects: >=11.0.0

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

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.

affects: >=10.0.0

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

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.

affects: <9.0.7

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

fix

Upgrade to `react-toastify@^9.1.3` or newer to ensure compatibility and correct behavior within React Server Components environments.

affects: <9.1.3

Errors

Common errors & fixes

Toast is undefined || Uncaught TypeError: Cannot read properties of undefined (reading 'content')

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.

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.

Memory leak when multiple containers are used

In versions prior to 9.0.7, having multiple `ToastContainer` instances could lead to memory leaks, especially when components unmounted.

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.

CSS `translate` property not working correctly or invalid CSS

Prior to v9.1.2, there were issues with invalid CSS `translate` properties affecting toast positioning or animations.

fix

Upgrade to `react-toastify@^9.1.2` or newer, which contains a fix for invalid CSS translate issues.

AutoClose doesn't work on update for toasts

In versions prior to 9.0.8, updating a toast would sometimes reset or disable the `autoClose` functionality, preventing toasts from automatically dismissing.

fix

Upgrade to `react-toastify@^9.0.8` or newer to resolve issues where `autoClose` might not work correctly after updating a toast.

Upgrade

Version history

11.0.5latest on npm

Audit

Dependencies

reactrequiredPeer dependency for React applications.

react-domrequiredPeer dependency for React DOM rendering.

Agent activity

22 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/fkhadra/react-toastify ↗

packagehttps://www.npmjs.com/package/react-toastify ↗

homepagehttps://fkhadra.github.io/react-toastify ↗