notistack: React Material-UI Notifications — Setup, Hooks & Customization

Short summary: Learn how to install notistack, integrate it with Material-UI snackbar, use the useSnackbar hook, manage a notification queue, and customize toasts for production-ready React apps.

Introduction — what notistack solves and when to pick it

notistack is a lightweight React library that layers on top of Material-UI’s Snackbar to provide a flexible notification system: queuing, stacking, quick programmatic control via hooks, and easy customization. If you need toast notifications that can stack without manual state plumbing — or you want a notification queue that won’t flood users during rapid events — notistack is purpose-built for that.

This guide focuses on practical setup, common patterns (enqueue, update, close), and customization points that production apps need: styling, accessibility, performance, and server-rendering caveats. Expect code examples for React + Material-UI (MUI v5+), pointers for TypeScript users, and tips to optimize for voice search and featured snippets.

I’ll be pragmatic and concise — less hand-waving, more working code. If you prefer a deeper walkthrough article, see this advanced toast notifications piece I referenced for patterns and edge-cases: advanced toast notifications with notistack.

Installation & initial setup

Start by installing notistack together with Material-UI core and its styling prerequisites (MUI v5 example). If you already have MUI installed, skip the duplicates. Command-line install is straightforward:

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

Wrap your application with SnackbarProvider at the top level (usually inside App.jsx or your router wrapper). The provider exposes global settings like maxSnack, anchorOrigin, and default autoHideDuration.

import { SnackbarProvider } from 'notistack';

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

Three points to note: (1) maxSnack controls concurrent toasts (useful for notification queueing), (2) you can provide a custom TransitionComponent and dense options, and (3) for server-side rendering, avoid using client-only APIs during initial render — hydrate provider on the client.

Getting started: enqueue, update, and dismiss

The real convenience of notistack is the useSnackbar hook: enqueue notifications from anywhere inside the provider. The basic API is tiny and expressive: enqueueSnackbar(message, options), closeSnackbar(key), and optional updateSnackbar patterns. Here’s a minimal example.

import { useSnackbar } from 'notistack';

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

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

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

Key behaviors: the enqueueSnackbar call returns an identifier you can later use to close or update the toast; passing persist: true keeps it visible until manually dismissed; use variant to switch styles (success, error, warning, info).

Use actions to add buttons inside the toast (e.g., Undo). Actions can be callbacks that call closeSnackbar with the toast key.

Notification queueing and concurrency control

Out-of-the-box notistack queues notifications and shows up to maxSnack at once. If you emit many events quickly, notistack will hold extras until a slot frees. This reduces UI noise and prevents overlapping messages without extra state management.

Configure maxSnack to tune concurrent visibility. For high-frequency systems (e.g., logging UI events), choose a small number (2–3). For informative non-critical toasts, allow more. You can also change anchorOrigin to stack vertically or horizontally depending on the layout.

If you need message prioritization, implement a tiny wrapper that controls enqueue timing: push events to your own priority queue and call enqueueSnackbar with throttling/debouncing logic. That approach preserves notistack’s UI behavior while giving you fine-grained control over order.

Customization: appearance, actions, and transitions

Customization is a strength: change global options via SnackbarProvider props, override MUI theme styles, or supply a custom content component for full control. For simple visual tweaks, use ContentProps to pass props to the underlying Snackbar content.

<SnackbarProvider
  maxSnack={4}
  anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
  autoHideDuration={3000}
  content={(key, message) => <CustomToast id={key} message={message} />}
/>

To include an action button like Undo, pass an action function in options that returns a React node. For example, include a small button that calls closeSnackbar or triggers an undo routine.

If you need different transitions, pass a TransitionComponent such as Slide or Grow from MUI. For accessibility, ensure each toast has clear text, optional ARIA attributes, and that interactive controls are keyboard-focusable.

Advanced tips: TypeScript, SSR, performance

TypeScript users get typed hooks easily by importing notistack types. Define custom variants in your theme if you want strongly typed variant names. Example: extend the MUI theme palette and notistack types to avoid any in variant options.

For server-side rendering, render the provider on the client only to avoid mismatch warnings related to animations or portal behavior. Lazy-mount the provider or guard use of browser-only APIs with feature checks.

Performance: keep toast content lightweight. If toasts display large components, lazy-render them via a portal or show summarized text and open a dialog for details. Debounce burst notifications and prefer a single summary toast for high-frequency events.

Common pitfalls and best practices

Avoid enqueuing toasts inside tight loops (map, event streams) without throttling — you’ll overwhelm the queue. Prefer summary notifications or batch updates. Also, don’t rely on autoHideDuration for critical messages; use persist and require explicit dismissal for important alerts.

Use consistent variants and tone across the app. Success and error colors should be instantly recognizable; use icons sparingly. Test keyboard navigation and screen reader announcements for each variant to ensure accessibility compliance.

When debugging, note that notistack uses portals to render snackbars. If you see strange z-index issues, inspect the provider and page stacking context. Anchoring to container nodes can mitigate conflicts with complex layouts.

Resources and backlinks

Official notistack repo: notistack GitHub — source, examples, and issues.

Material-UI snackbar docs: Material-UI snackbar — base components and transitions reference.

Pattern article and deeper examples: advanced toast notifications with notistack — practical patterns for complex notification flows.

FAQ — top questions about notistack

How do I install and setup notistack with Material-UI?

Install notistack and MUI packages, wrap your app in SnackbarProvider, then call enqueueSnackbar(message, options) from components via the useSnackbar hook. Example: npm install notistack @mui/material @emotion/react @emotion/styled.

How do I queue notifications and avoid overlap?

notistack queues notifications automatically and displays up to maxSnack at once. Adjust maxSnack to control concurrent toasts, use persist for long-lived messages, and implement simple throttling for burst events if you need prioritization.

Can I customize notistack appearance and behavior?

Yes. Use SnackbarProvider props (anchorOrigin, autoHideDuration, maxSnack), provide a custom content component, override MUI theme styles, and pass actions or transitions per toast. Styles can be applied via MUI theme overrides or styled components.