# Notistack — Stackable Snackbar Notifications for React

> A notification library for React that stacks multiple snackbar messages on screen simultaneously. Designed to work with Material UI but usable standalone, it provides customizable transitions, auto-dismiss, and action buttons.

## Install

Save as a script file and run:

# Notistack — Stackable Snackbar Notifications for React

## Quick Use
```bash
npm install notistack
```
```jsx
import { SnackbarProvider, enqueueSnackbar } from "notistack";

function App() {
  return (
    <SnackbarProvider maxSnack={3}>
      <button onClick={() => enqueueSnackbar("Item saved!")}>
        Save
      </button>
    </SnackbarProvider>
  );
}
```

## 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/

---
Source: https://tokrepo.com/en/workflows/asset-a4e5466c
Author: Script Depot