notistack

notistack is a React library for displaying notification snackbars (toasts) that can queue and stack on top of each other instead of replacing one another, a common gap in simpler toast libraries. As of v3 it is fully standalone, no longer requiring Material-UI as a peer dependency, though its default content component still renders in a Material Design style.

Notifications are triggered either declaratively through the useSnackbar hook or imperatively by importing the exported enqueueSnackbar/closeSnackbar functions directly, which is useful for firing notifications from outside the React tree (API clients, Redux middleware, error boundaries). Positioning, transition animation, auto-hide duration, persistence, and custom content are all configurable per-snackbar or globally via SnackbarProvider props.

What You Get

• A SnackbarProvider component that manages the queue/stack of active notifications and renders them via a React portal
• A useSnackbar hook (enqueueSnackbar, closeSnackbar) plus module-level enqueueSnackbar/closeSnackbar exports for calling from outside React components
• Default Material Design-styled snackbar content (MaterialDesignContent) with success/error/warning/info/default variants and icons
• Configurable stacking limit (maxSnack), FIFO queueing of overflow notifications, per-snackbar persist flag, and dedupe via preventDuplicate
• Pluggable transition components (Slide by default) and support for fully custom snackbar content components

Common Use Cases

• Showing success/error toasts after form submissions or API calls in a React app
• Surfacing background job or websocket-driven notifications that may arrive faster than a user can dismiss them
• Replacing a heavier Material-UI Snackbar setup with a purpose-built, stackable notification system
• Triggering notifications imperatively from non-component code such as an Axios interceptor or Redux middleware

Under The Hood

Architecture - SnackbarProvider is a class component that owns two pieces of state: a queue of pending snacks and a snacks array of currently displayed ones, transitioned between via small reducer-style methods (handleDisplaySnack, processQueue, handleDismissOldest, handleExitedSnack) that enforce the maxSnack cap and dismiss the oldest non-persistent snack to make room for new ones. Snacks are grouped by anchorOrigin into one SnackbarContainer per screen position, and each SnackbarItem wraps a Collapse transition around a configurable TransitionComponent (Slide by default) around the actual content — either a custom component or the default MaterialDesignContent. A React Context (SnackbarContext) exposes enqueueSnackbar/closeSnackbar to the useSnackbar hook, and the same functions are also assigned to module-level exports so they can be called imperatively from anywhere in the app, not just inside a component with hook access.

Tech Stack - Written almost entirely in TypeScript (99% of source, ~2,400 lines), built with tsdx (a Rollup wrapper) into CJS and ESM bundles plus a single index.d.ts. Runtime dependencies are minimal: clsx for conditional className composition and goober (a ~1KB CSS-in-JS engine) for style generation via a small makeStyles wrapper, avoiding a heavier styling dependency like Emotion or styled-components. React and react-dom (17/18/19) are peer dependencies only.

Code Quality - The test script in package.json is literally echo todo-test and no test files exist anywhere in the repository (src or examples), so there is no automated test coverage to verify behavior. Code is otherwise organized into small, single-purpose modules (SnackbarProvider, SnackbarItem, SnackbarContainer, ui/MaterialDesignContent, transitions/, utils/) with a centralized 430-line types.ts for all public types, consistent naming conventions, and ESLint/Prettier configs enforced in CI, but a handful of as any casts are used to route dynamic transition callback names.

API Design - The library offers two equally ergonomic entry points to the same functionality: the useSnackbar() hook for idiomatic use inside components, and directly-imported enqueueSnackbar/closeSnackbar functions for calling from anywhere, including outside the React tree. Getting started requires only wrapping the app in <SnackbarProvider> and calling enqueueSnackbar('message') — no boilerplate configuration is required for the common case, while variants, custom content, positioning, and transitions are all opt-in via well-named props documented on notistack.com.