Notistack — Stackable Snackbar Notifications for React

Introduction

Notistack extends the snackbar concept by allowing multiple notifications to stack on screen at the same time. While originally built as a companion to Material UI's Snackbar, it works as a standalone notification system for any React application. It manages notification queuing, stacking, and dismissal with minimal configuration.

What Notistack Does

• Stacks multiple notifications vertically with configurable maximum count
• Supports success, error, warning, info, and default notification variants
• Provides both hook-based (useSnackbar) and imperative (enqueueSnackbar) APIs
• Manages auto-dismiss timers with configurable duration per notification
• Handles custom content rendering for rich notification layouts

Architecture Overview

Notistack uses a context provider (SnackbarProvider) that maintains a queue of active notifications. When enqueueSnackbar is called, a new notification object is added to the queue. The provider renders notifications in a portal, positioning them at a configurable anchor origin. Transitions are handled via CSS or custom transition components. When the maximum stack count is reached, older notifications are either dismissed or queued until a slot opens.

Self-Hosting & Configuration

• Wrap your app root with SnackbarProvider and set maxSnack for stack limit
• Configure anchorOrigin to position notifications (top-right, bottom-left, etc.)
• Set autoHideDuration globally on the provider or per notification
• Pass action prop to add buttons like Dismiss or Undo to each notification
• Use the Components prop to override the default snackbar with custom React components

Key Features

• Multiple simultaneous notifications with smooth enter and exit transitions
• Imperative API callable from anywhere without requiring component context
• Custom notification components for branded or complex notification layouts
• Persistent notifications that stay until manually dismissed
• Prevent duplicate notifications with the preventDuplicate option

Comparison with Similar Tools

• React Hot Toast — simpler API with built-in promise tracking; Notistack offers more Material UI integration
• React Toastify — feature-rich with built-in progress bars; Notistack focuses on stackable snackbar behavior
• Sonner — minimal toast library; Notistack provides deeper customization and Material UI compatibility
• Material UI Snackbar — single notification only; Notistack adds stacking and queuing on top

FAQ

Q: Do I need Material UI to use Notistack? A: No. Notistack works standalone with its own default styling. Material UI integration is optional.

Q: Can I customize the appearance of individual notifications? A: Yes. Pass variant-specific or per-notification style overrides, or use the Components prop for fully custom rendering.

Q: How do I dismiss a notification programmatically? A: enqueueSnackbar returns a key. Pass it to closeSnackbar(key) to dismiss that specific notification.

Q: Does it support React 18 and concurrent features? A: Yes. Notistack is compatible with React 18 including strict mode and concurrent rendering.

Sources

• https://github.com/iamhosseindhv/notistack
• https://notistack.com/