notistack: Advanced React Material‑UI Notifications

Quick guide — installation, hooks, queueing, customization, examples, and SEO-friendly snippets for React notification systems.

notistack is a lightweight notification library that augments Material‑UI’s snackbar system with a stacking queue, easy hooks, and powerful customization. If you build React apps and need reliable toasts with predictable behavior — including queuing, actions, and themed variants — notistack makes it straightforward without reinventing the wheel.

This article walks you from installation through production patterns: setup, useSnackbar hooks, notification queuing, custom content, and accessibility. Examples are idiomatic for React + Material‑UI (MUI) and compatible with modern builds.

Expect clear code samples and short explanations rather than fluffy marketing: you’ll be ready to implement a robust React notification system after reading this page.

Getting started: installation and setup

Install notistack together with Material‑UI. With MUI v5 you typically install @mui/material plus notistack. If you’re using yarn or npm, the commands are tiny:

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

Wrap your root application in SnackbarProvider. This provider manages the notification queue and surface. Minimal setup looks like this:

import { SnackbarProvider } from 'notistack';

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

Key provider props to know immediately: maxSnack (concurrent toasts), anchorOrigin (screen placement), and autoHideDuration. Use these defaults to avoid flooding the user with notifications. Consider a small maxSnack (2–3) for mobile UX.

If you want a deep dive tutorial or advanced toast examples, the community has good writeups; for example, this advanced guide demonstrates practical patterns for production: Advanced toast notifications with notistack.

Core concepts: hooks, API, and the notification queue

notistack exposes a single hook you’ll use in components: useSnackbar(). The hook returns enqueueSnackbar to push a message and closeSnackbar to dismiss it programmatically. This API is concise and encourages decoupled notification logic.

import { useSnackbar } from 'notistack';

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

  const handleSave = async () => {
    const key = enqueueSnackbar('Saving...', { variant: 'info', persist: true });
    try {
      await api.save();
      closeSnackbar(key);
      enqueueSnackbar('Saved successfully', { variant: 'success' });
    } catch (err) {
      closeSnackbar(key);
      enqueueSnackbar('Save failed', { variant: 'error' });
    }
  };

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

Queueing behavior: when you call enqueueSnackbar multiple times, notistack manages an internal queue and displays up to maxSnack. Excess notifications wait until there’s space. You can also pass a unique key or persist notifications to keep them until explicitly closed.

Variants are simple out of the box: success, error, warning, and info. You can style variants via MUI theme overrides or by supplying a custom component to SnackbarProvider as content for entirely custom rendering.

Customization: theming, custom content, and actions

notistack blends with MUI theming. You can override styles for snackbar variants in your theme or provide classNames to SnackbarProvider. For richer notifications, pass React nodes as the content or use action to add dismiss or undo buttons.

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

For full custom rendering, use the ContentProps and iconVariant options or provide a custom snackbar component via SnackbarProvider‘s Components configuration. This allows custom markups, embedded images, or progress bars inside toasts without breaking the queueing mechanism.

Transitions and positions are configurable. Use MUI’s transitions (Slide, Grow, Fade) to animate entry/exit, and set anchorOrigin for consistent placement across viewports. Keep accessibility in mind: add meaningful text, aria labels for actions, and avoid auto dismissing critical errors too quickly.

Patterns and best practices for production

Design your notification strategy before sprinkling enqueueSnackbar across the codebase. Centralize notification logic in hooks or services, so you can unify formats, deduplicate messages, and handle server-sent events uniformly. A thin wrapper around enqueueSnackbar that attaches correlation IDs and standard metadata saves time later.

Common patterns:
– A NotificationService (or hook) that exposes typed helpers like notifySuccess, notifyError.
– Deduplication: track recent messages to avoid repeating the same toast within a short window.
– Async feedback: use a persistent toast for in-progress operations, then replace or close it when complete.

For server-driven notifications (WebSocket/SSE), enqueue messages at the top level so the provider is always mounted. Be mindful of rate limits: if the server sends bursts, batch or coalesce messages before showing them to the user.

Examples: real‑world snippets

Example: Promise-aware notification that shows a pending toast, then success or error depending on the result.

async function withToast(promiseFactory, { pendingMessage, successMessage, errorMessage }, enqueueSnackbar, closeSnackbar) {
  const key = enqueueSnackbar(pendingMessage, { persist: true, variant: 'info' });
  try {
    const result = await promiseFactory();
    closeSnackbar(key);
    enqueueSnackbar(successMessage, { variant: 'success' });
    return result;
  } catch (err) {
    closeSnackbar(key);
    enqueueSnackbar(errorMessage || err.message, { variant: 'error' });
    throw err;
  }
}

Example: central notification hook that simplifies usage project-wide:

import { useSnackbar } from 'notistack';

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

  const notify = (msg, opts = {}) => enqueueSnackbar(msg, opts);
  const success = (msg, opts = {}) => notify(msg, { variant: 'success', ...opts });
  const error = (msg, opts = {}) => notify(msg, { variant: 'error', ...opts });

  return { notify, success, error, closeSnackbar };
}

Use these helpers across your app for consistent copy and behavior. This also helps with analytics: add a single hook location to emit telemetry when toasts are shown.

Optimization for voice search and featured snippets

To increase chance of appearing in a featured snippet or voice result, include concise, direct answers up front when addressing common how-to questions (e.g., «How to install notistack?» or «How do I enqueue a snackbar?»). Use short code blocks and labeled examples—these are often pulled by search engines for snippet generation.

For voice search, write conversational alternatives for common queries and include plain-language answers near the top of sections. For instance: «Install notistack with npm i notistack and wrap your app with SnackbarProvider.» Short and specific phrases perform best for assistant readouts.

FAQ

How do I install and set up notistack in a React app?

Install notistack and MUI via npm/yarn, then wrap your root with SnackbarProvider. Use useSnackbar() in components to call enqueueSnackbar. Example: npm install notistack @mui/material, then wrap App with <SnackbarProvider maxSnack={3}>.

How do I customize notistack notifications and add actions?

Customize via MUI theme overrides or provide a custom content component to SnackbarProvider. Add inline actions using the action option of enqueueSnackbar to render buttons like «Undo» or «Retry». For full control, render custom React nodes.

How can I queue and manage multiple notifications reliably?

notistack manages a queue automatically. Set maxSnack to control concurrency. For advanced control, persist critical toasts, pass keys for programmatic close, and implement a central notification wrapper that deduplicates similar messages and throttles bursts from servers.