notistack

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

weekly downloads1.2M

versionv3.0.2

licenseMIT

categoryfrontend

notistackenqueueSnackbarsnackbarprovideruseSnackbarmultiplereactjavascriptmaterial-uitoastreduxsnackbarstackednotificationmaterial designhosseindehnokhalajiiamhosseindhv

Overview

notistack is a React notification library that provides a robust system for displaying snackbars (toasts) in web applications. Unlike basic notification solutions, it handles complex scenarios like stacking multiple notifications, managing display queues, and providing fine-grained control over notification behavior. With over 1.2 million weekly downloads, it's become a standard choice for React developers who need reliable user feedback mechanisms.

The library solves the common problem of managing multiple simultaneous notifications without overwhelming users. It automatically handles queue management, positioning, animations, and dismissal logic—concerns that would otherwise require significant custom code. Version 3.x operates as a standalone library without requiring Material-UI as a dependency, making it lightweight and framework-agnostic while still supporting Material-UI integration when desired.

notistack provides both modern hooks-based and HOC-based APIs, making it compatible with various React codebases. It supports features critical to production applications: duplicate prevention, persistent notifications for critical alerts, custom variants with TypeScript support, and programmatic control for complex workflows. The library handles edge cases like rapid notification firing, memory cleanup, and accessibility considerations that developers often overlook when building custom notification systems.

Developers choose notistack when they need notifications that go beyond simple alerts—scenarios requiring undo actions, progress indicators within toasts, or complex notification hierarchies. Its declarative API integrates cleanly with React's component model while providing imperative controls when needed for integration with non-React code or global error handlers.

Quick Start

typescript

import { SnackbarProvider, useSnackbar } from 'notistack';
import { useEffect } from 'react';

// Wrap your app with SnackbarProvider
function App() {
  return (
    <SnackbarProvider
      maxSnack={3}
      anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
      autoHideDuration={3000}
    >
      <Dashboard />
    </SnackbarProvider>
  );
}

function Dashboard() {
  const { enqueueSnackbar, closeSnackbar } = useSnackbar();

  const handleSaveData = async () => {
    const snackbarId = enqueueSnackbar('Saving changes...', {
      variant: 'info',
      persist: true
    });

    try {
      await fetch('/api/save', { method: 'POST' });
      closeSnackbar(snackbarId);
      enqueueSnackbar('Changes saved successfully!', {
        variant: 'success',
        action: (key) => (
          <button onClick={() => closeSnackbar(key)}>Dismiss</button>
        )
      });
    } catch (error) {
      closeSnackbar(snackbarId);
      enqueueSnackbar('Failed to save changes', {
        variant: 'error',
        preventDuplicate: true
      });
    }
  };

  const handleDeleteWithUndo = () => {
    const itemId = '123';
    enqueueSnackbar('Item deleted', {
      variant: 'default',
      autoHideDuration: 5000,
      action: (key) => (
        <>
          <button onClick={() => {
            console.log('Undo delete:', itemId);
            closeSnackbar(key);
          }}>Undo</button>
          <button onClick={() => closeSnackbar(key)}>×</button>
        </>
      )
    });
  };

  return (
    <div>
      <button onClick={handleSaveData}>Save Data</button>
      <button onClick={handleDeleteWithUndo}>Delete Item</button>
      <button onClick={() => enqueueSnackbar('Simple notification')}>Show Toast</button>
    </div>
  );
}

Use Cases

Form validation feedback: Display stacked error, warning, and success messages as users interact with complex forms. When multiple validation errors occur simultaneously, notistack queues them intelligently rather than showing all at once, preventing UI clutter.

Background task notifications: Show ongoing operations like file uploads or API synchronization with persistent notifications that include progress indicators and action buttons. Users can dismiss completed tasks while keeping active ones visible.

Real-time event streams: Handle WebSocket or SSE events that generate frequent notifications, using duplicate prevention to avoid showing the same alert multiple times and maxSnack limits to prevent notification overflow.

Undo/redo workflows: Implement Gmail-style "Message sent" notifications with undo buttons that remain visible for a few seconds, allowing users to reverse destructive actions before they're committed.

Global error handling: Centralize error reporting across your application by integrating notistack with error boundaries and API interceptors, providing consistent user feedback for network failures, permissions errors, or unexpected exceptions.

Pros & Cons

Pros

+Standalone library in v3+ with no Material-UI dependency, reducing bundle size significantly compared to v2
+Excellent TypeScript support with type-safe custom variants and full API typing
+Handles complex notification scenarios out-of-the-box: stacking, queuing, auto-dismissal, duplicate prevention
+Clean API with both hooks and HOC patterns, making it compatible with class and functional components
+Production-ready with 1.2M+ weekly downloads, indicating stable API and active maintenance

Cons

−Breaking changes between v2 and v3 require migration effort for existing projects using Material-UI integration
−Custom styling requires understanding the library's internal class structure, which can be less intuitive than component-based styling
−Limited built-in animation options compared to more opinionated libraries—advanced animations require custom implementation
−Documentation could be more comprehensive for advanced use cases like custom transitions or complex action handlers
−No built-in notification persistence across page reloads, requiring custom implementation for that use case

Alternatives

react-hot-toastv2.6.0

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

frontendreactnotifications

2.8M / week

react-toastifyv11.0.5

React notification made easy

frontendreactnotification

3.0M / week

sonnerv2.0.7

An opinionated toast component for React.

frontendreactnotifications

9.9M / week

Install

bash

npm install notistack

bash

pnpm add notistack

bash

bun add notistack

Overview

Quick Start

typescript

import { SnackbarProvider, useSnackbar } from 'notistack';
import { useEffect } from 'react';

// Wrap your app with SnackbarProvider
function App() {
  return (
    <SnackbarProvider
      maxSnack={3}
      anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
      autoHideDuration={3000}
    >
      <Dashboard />
    </SnackbarProvider>
  );
}

function Dashboard() {
  const { enqueueSnackbar, closeSnackbar } = useSnackbar();

  const handleSaveData = async () => {
    const snackbarId = enqueueSnackbar('Saving changes...', {
      variant: 'info',
      persist: true
    });

    try {
      await fetch('/api/save', { method: 'POST' });
      closeSnackbar(snackbarId);
      enqueueSnackbar('Changes saved successfully!', {
        variant: 'success',
        action: (key) => (
          <button onClick={() => closeSnackbar(key)}>Dismiss</button>
        )
      });
    } catch (error) {
      closeSnackbar(snackbarId);
      enqueueSnackbar('Failed to save changes', {
        variant: 'error',
        preventDuplicate: true
      });
    }
  };

  const handleDeleteWithUndo = () => {
    const itemId = '123';
    enqueueSnackbar('Item deleted', {
      variant: 'default',
      autoHideDuration: 5000,
      action: (key) => (
        <>
          <button onClick={() => {
            console.log('Undo delete:', itemId);
            closeSnackbar(key);
          }}>Undo</button>
          <button onClick={() => closeSnackbar(key)}>×</button>
        </>
      )
    });
  };

  return (
    <div>
      <button onClick={handleSaveData}>Save Data</button>
      <button onClick={handleDeleteWithUndo}>Delete Item</button>
      <button onClick={() => enqueueSnackbar('Simple notification')}>Show Toast</button>
    </div>
  );
}

Use Cases

Pros & Cons

Pros

+Standalone library in v3+ with no Material-UI dependency, reducing bundle size significantly compared to v2
+Excellent TypeScript support with type-safe custom variants and full API typing
+Handles complex notification scenarios out-of-the-box: stacking, queuing, auto-dismissal, duplicate prevention
+Clean API with both hooks and HOC patterns, making it compatible with class and functional components
+Production-ready with 1.2M+ weekly downloads, indicating stable API and active maintenance

Cons

−Breaking changes between v2 and v3 require migration effort for existing projects using Material-UI integration
−Custom styling requires understanding the library's internal class structure, which can be less intuitive than component-based styling
−Limited built-in animation options compared to more opinionated libraries—advanced animations require custom implementation
−Documentation could be more comprehensive for advanced use cases like custom transitions or complex action handlers
−No built-in notification persistence across page reloads, requiring custom implementation for that use case