react-toastify

React notification made easy

weekly downloads3.0M

versionv11.0.5

licenseMIT

categoryfrontend

reactnotificationtoastreact-componentreact-toastifypushalertsnackbarmessage

Overview

react-toastify is a mature notification library for React applications that provides toast messages for user feedback. With over 3 million weekly downloads, it has become a standard solution for displaying temporary alerts, success confirmations, error messages, and informational prompts in React projects.

The library addresses the common need for non-intrusive user notifications without blocking interaction. Unlike browser alerts or modals, toasts appear temporarily at screen edges, automatically dismiss, and support queuing multiple messages. react-toastify integrates directly with React's component model, supporting both functional and class components without requiring wrapper patterns.

What distinguishes react-toastify from simpler alternatives is its comprehensive feature set for production applications. It handles asynchronous operations through promise-based toasts that show loading states and resolve to success or error messages. The library includes built-in progress bars, swipe-to-dismiss gestures, pause-on-hover behavior, and programmatic control for updating or removing toasts mid-display. Version 11 simplified integration by eliminating mandatory CSS imports and adopting CSS variables for theming.

Development teams choose react-toastify when they need reliable notification handling with granular control over behavior, appearance, and lifecycle events. It's particularly valuable in dashboards, form-heavy applications, and SPAs where asynchronous feedback is critical to user experience.

Quick Start

typescript

import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

function UserRegistrationForm() {
  const handleSubmit = async (formData) => {
    const registrationPromise = fetch('/api/register', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(formData)
    }).then(res => {
      if (!res.ok) throw new Error('Registration failed');
      return res.json();
    });

    toast.promise(
      registrationPromise,
      {
        pending: 'Creating your account...',
        success: 'Welcome! Check your email to verify.',
        error: 'Registration failed. Try again.'
      },
      {
        position: 'top-right',
        autoClose: 5000
      }
    );
  };

  const showCustomToast = () => {
    const toastId = toast.info(
      <div>
        <strong>File uploading</strong>
        <button onClick={() => toast.dismiss(toastId)}>Cancel</button>
      </div>,
      { autoClose: false, closeButton: false }
    );

    setTimeout(() => {
      toast.update(toastId, {
        render: 'Upload complete!',
        type: 'success',
        autoClose: 3000
      });
    }, 3000);
  };

  return (
    <>
      <button onClick={() => handleSubmit({ email: 'user@example.com' })}>
        Register
      </button>
      <button onClick={showCustomToast}>Upload File</button>
      <ToastContainer theme="colored" limit={3} />
    </>
  );
}

Use Cases

Form submission feedback: Display success or validation error toasts after API calls, using promise toasts to show loading spinners during submission and automatically transition to success/error states without manual state management.

Background task monitoring: Track long-running operations like file uploads or batch processing by rendering custom React components inside toasts with progress indicators, updating them programmatically as tasks advance.

Multi-step workflow notifications: Queue multiple toasts with controlled timing and positioning to guide users through complex processes like onboarding or checkout, using autoClose delays and sequential display limits to prevent overwhelming the interface.

Undo/redo actions: Implement temporary action confirmations with custom close buttons that trigger rollback functions, giving users 5-10 seconds to cancel destructive operations before they commit.

Real-time event alerts: Show WebSocket or SSE-triggered notifications for chat messages, system updates, or collaborative editing changes, using pause-on-focus-loss to prevent missed messages when users switch tabs.

Pros & Cons

Pros

+Promise-based toast.promise() handles async workflows elegantly, automatically managing loading/success/error states without manual updates
+Extensive customization through CSS variables, per-toast configuration, and support for custom React components as toast content
+Production-ready features like programmatic update/dismiss, concurrent toast limits, progress bar control, and lifecycle hooks (onOpen/onClose)
+Active maintenance with modern API improvements and 3M+ weekly downloads indicating community trust and ecosystem compatibility
+No CSS import required in v11, reducing configuration overhead and bundle size while maintaining full styling control

Cons

−Larger bundle size (~15-20kb) compared to minimalist alternatives like react-hot-toast (~1kb) or sonner (~3kb), impacting performance-critical applications
−Learning curve for advanced features like toast.update() patterns and custom transition configurations can slow initial implementation
−Default animations and styling require CSS variable overrides or custom components for brand-specific design systems, adding setup time

Alternatives

notistackv3.0.2

Highly customizable notification snackbars (toasts) that can be stacked on top of each other

frontendnotistackenqueueSnackbar

1.2M / week

react-hot-toastv2.6.0

Smoking hot React Notifications. Lightweight, customizable and beautiful by default.

frontendreactnotifications

2.8M / week

sonnerv2.0.7

An opinionated toast component for React.

frontendreactnotifications

9.9M / week

Comparisons

react-hot-toast vs react-toastify

frontend

Install

bash

npm install react-toastify

bash

pnpm add react-toastify

bash

bun add react-toastify

Overview

Quick Start

typescript

import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

function UserRegistrationForm() {
  const handleSubmit = async (formData) => {
    const registrationPromise = fetch('/api/register', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(formData)
    }).then(res => {
      if (!res.ok) throw new Error('Registration failed');
      return res.json();
    });

    toast.promise(
      registrationPromise,
      {
        pending: 'Creating your account...',
        success: 'Welcome! Check your email to verify.',
        error: 'Registration failed. Try again.'
      },
      {
        position: 'top-right',
        autoClose: 5000
      }
    );
  };

  const showCustomToast = () => {
    const toastId = toast.info(
      <div>
        <strong>File uploading</strong>
        <button onClick={() => toast.dismiss(toastId)}>Cancel</button>
      </div>,
      { autoClose: false, closeButton: false }
    );

    setTimeout(() => {
      toast.update(toastId, {
        render: 'Upload complete!',
        type: 'success',
        autoClose: 3000
      });
    }, 3000);
  };

  return (
    <>
      <button onClick={() => handleSubmit({ email: 'user@example.com' })}>
        Register
      </button>
      <button onClick={showCustomToast}>Upload File</button>
      <ToastContainer theme="colored" limit={3} />
    </>
  );
}

Use Cases

Pros & Cons

Pros

+Promise-based toast.promise() handles async workflows elegantly, automatically managing loading/success/error states without manual updates
+Extensive customization through CSS variables, per-toast configuration, and support for custom React components as toast content
+Production-ready features like programmatic update/dismiss, concurrent toast limits, progress bar control, and lifecycle hooks (onOpen/onClose)
+Active maintenance with modern API improvements and 3M+ weekly downloads indicating community trust and ecosystem compatibility
+No CSS import required in v11, reducing configuration overhead and bundle size while maintaining full styling control

Cons

−Larger bundle size (~15-20kb) compared to minimalist alternatives like react-hot-toast (~1kb) or sonner (~3kb), impacting performance-critical applications
−Learning curve for advanced features like toast.update() patterns and custom transition configurations can slow initial implementation
−Default animations and styling require CSS variable overrides or custom components for brand-specific design systems, adding setup time