What is notistack and when to use it

notistack is a tiny wrapper around Material-UI (MUI) snackbars that adds a managed notification queue and a convenient hook-based API. Instead of manually rendering Snackbar components across your app, you enqueue messages and let notistack handle stacking, timing, and dismissal. It maps perfectly to React applications that use MUI and need reliable toast/snackbar notifications without boilerplate.

Use notistack when you want: lightweight toasts, a queue that prevents overlap, easy actions inside notifications (undo buttons, links), and per-notification options (persist, variant, autoHideDuration). It’s especially useful in medium-to-large apps where notifications originate from many places (components, async flows, Redux/Saga, etc.).

The library is actively maintained and interoperates with MUI’s theming and styling system. If your stack already includes Material-UI, notistack is usually the path of least resistance to add robust toast notifications.

Installation & getting started

Install notistack and the peer dependencies for MUI. If you’re on MUI v5:

npm install notistack @mui/material @emotion/react @emotion/styled
# or
yarn add notistack @mui/material @emotion/react @emotion/styled

Wrap your root with SnackbarProvider. This creates a context and queue that useSnackbar() hooks consume. Typical placement is in index.jsx or App wrapper so every component can enqueue notifications.

Minimal root setup:

import { SnackbarProvider } from 'notistack';

function Root() {
  return (
    <SnackbarProvider maxSnack={3} anchorOrigin={{ vertical: 'top', horizontal: 'right' }}>
      <App />
    </SnackbarProvider>
  );
}

Basic example: enqueueSnackbar and hooks

notistack exposes a hook, useSnackbar(), which returns enqueueSnackbar and closeSnackbar. Call enqueueSnackbar with a message and optional options (variant, persist, action, autoHideDuration, key).

Example usage inside a component:

import { useSnackbar } from 'notistack';

function SaveButton() {
  const { enqueueSnackbar } = useSnackbar();

  const onSave = async () => {
    try {
      await api.save();
      enqueueSnackbar('Saved successfully', { variant: 'success' });
    } catch (err) {
      enqueueSnackbar('Save failed', { variant: 'error' });
    }
  };

  return <button onClick={onSave}>Save</button>;
}

Because notifications are managed globally, you can enqueue them from inside UI components, custom hooks, or even action creators (with a ref to the provider or a helper wrapper).

Notification queue, ordering and persistence

notistack manages a queue by default and shows up to maxSnack concurrently. When the limit is reached, older notifications are dismissed (or moved) to make room for new ones — this is configurable. Use persist to keep a snackbar until the user explicitly closes it.

Control behavior with provider props: maxSnack, preventDuplicate, and dense. For guaranteed ordering, enqueue with unique keys or wait for callbacks before adding another notification.

Example: keep an important error visible:

enqueueSnackbar('Critical error happened', { variant: 'error', persist: true });

Customization: variants, actions and styling

notistack supports variants (default, success, error, warning, info), and you can inject custom content. Use the action option to add buttons (e.g., Undo). If you need a full style override, supply a custom ContentProps or a custom SnackbarContent component.

Because notistack uses MUI under the hood, it respects MUI theming. Override styles via theme overrides or use the classes prop on SnackbarProvider to supply custom class names. For per-notification CSS, include className in options or wrap message in a styled element.

Example add Undo button:

enqueueSnackbar('Item deleted', {
  variant: 'info',
  action: key => (
    <button onClick={() => { undoDelete(); closeSnackbar(key); }}>Undo</button>
  )
});

Advanced patterns: programmatic API & cross-module enqueueing

Sometimes you want to show notifications from non-React modules (e.g., redux middleware). The recommended approach is to keep a reference to enqueueSnackbar or create a small notifier module that exposes wrapper functions. Use useRef and attach provider methods at bootstrap.

Another pattern is to centralize notification formatting: create a helper like notify({type, message, meta}) so all calls have consistent variants, durations, and tracking IDs. This improves analytics and makes translations straightforward.

Finally, for server-driven notifications (push, web socket), enqueue messages on message receive and avoid rapid-fire enqueues by debouncing or grouping related messages into a single toast.

Tips for accessibility, SEO and voice search

Make notifications accessible: provide readable text, focus management if the notification requires interaction, and aria-live attributes. notistack uses MUI Snackbar which includes role and aria attributes; still, test with screen readers to ensure messages are announced.

For voice-search and snippet optimization, craft messages and titles that mirror natural language queries — short, descriptive sentences that answer the user intent immediately. Keep one-line actionable text for toasts that could be read by assistants.

Example voice-friendly message: "File upload complete. Tap to view." This reads well for both visual UX and voice assistants.

Useful links and references

Official notistack repository and docs: notistack on GitHub. Material-UI snackbars docs: MUI Snackbars. npm package: notistack on npm.

For a practical tutorial and advanced patterns, see this community article: Advanced Toast Notifications with notistack.

These resources serve as authoritative references; link back to them when you publish to improve credibility and provide readers a place for API-level details.

Quick reference: common options and props

A compact cheat-sheet of the most used options for enqueueSnackbar and SnackbarProvider.

• maxSnack — max concurrent snackbars shown
• variant — ‘success’ | ‘error’ | ‘warning’ | ‘info’ | custom
• persist — keep until dismissed
• action — render action (buttons) per snackbar
• autoHideDuration — milliseconds to auto-close

FAQ

Semantic core (keyword clusters)

Main keywords, LSI, and clusters derived from the provided seed list and typical search intent for React/MUI notification solutions.

Backlinks (anchor text)

When publishing, the following anchors should link to authoritative resources to boost SEO and user trust:

• notistack — official GitHub repo and docs
• React Material-UI snackbar — MUI docs
• notistack tutorial — community tutorial
• notistack installation — npm package page