react-notifications-component: The Only Guide You Actually Need

React
Notifications
Toast
Tutorial
Updated · 2025 · 12 min read

Every React app eventually needs to tell the user something. A form was submitted. An API call failed. A file finished uploading. You can handle that with a <div> and a lot of useState pain — or you can reach for a proper
React notification library
that was built specifically for this.
react-notifications-component
is one of the most feature-complete options in the ecosystem: it supports multiple notification types, fully customizable animations, a global store, and plays nicely with both class components and modern React hooks.

This guide covers everything from first install to advanced customization — without the fluff. If you’ve been stacking alert() calls in your codebase like it’s 2012, this one’s for you.

What Is react-notifications-component and Why Use It?

At its core, react-notifications-component is a declarative
React
notification system that manages the entire lifecycle of in-app messages: creation, animation, queuing, and dismissal. It ships with five built-in notification types — success, danger, info, warning, and default — each wired to a distinct visual style out of the box. You get a working
React notification system
without writing a single animation or z-index battle.

Compared to lighter alternatives like react-hot-toast or react-toastify, react-notifications-component leans toward configuration depth. You can control slide-in direction, animation duration, dismissal behavior (on click, on touch, after timeout), container placement, and even pass fully custom React components as notification content. That flexibility makes it a strong fit for applications where notifications carry real UI weight — dashboards, admin panels, real-time feeds — rather than just a quick “Saved!” pop.

The library also exposes a global Store object, which means you can trigger notifications from anywhere in your app — not just from within React’s render tree. Service workers, Axios interceptors, Redux middleware, WebSocket handlers: all of them can push a notification without needing access to component state or context. That architectural decision alone separates it from many competitors.

Installation and Initial Setup

react-notifications-component installation
is straightforward. Add the package via npm or yarn, then handle two one-time configuration steps: mounting the container component and importing the stylesheet.

# npm
npm install react-notifications-component

# yarn
yarn add react-notifications-component

Once installed, you need to place the <ReactNotifications /> component at the root of your application — typically in App.jsx or index.jsx. This component acts as the portal anchor for all notification rendering. It must exist in the DOM before you call any store method. Forget this step and you’ll get silence instead of toasts, which is arguably the most confusing bug to debug at 11pm.

// App.jsx
import React from 'react';
import { ReactNotifications } from 'react-notifications-component';
import 'react-notifications-component/dist/theme.css';

function App() {
  return (
    <>
      <ReactNotifications />
      {/* rest of your app */}
    </>
  );
}

export default App;

The CSS import pulls in the default theme and animation styles. If you’re using a CSS-in-JS solution or a custom bundler that handles asset imports differently, make sure this file gets processed — it’s not optional for the default visual experience. You can override or replace it entirely once you’ve got the basics working, but start with it in place during
react-notifications-component getting started
to rule out styling issues early.

Using the Store: Triggering Notifications from Anywhere

The Store is the most powerful abstraction in the library. It decouples notification dispatching from the React component tree entirely. You import it as a named export and call Store.addNotification() with a configuration object. No props drilling, no context plumbing, no custom event bus required.

import { Store } from 'react-notifications-component';

Store.addNotification({
  title: "Success!",
  message: "Your changes have been saved.",
  type: "success",           // success | danger | info | warning | default
  insert: "top",             // top | bottom
  container: "top-right",   // top-left | top-right | top-center | bottom-left | bottom-right | bottom-center
  animationIn: ["animate__animated", "animate__fadeIn"],
  animationOut: ["animate__animated", "animate__fadeOut"],
  dismiss: {
    duration: 4000,
    onScreen: true
  }
});

The container property controls where on the screen the notification appears. The dismiss object is where things get interesting: you can set duration in milliseconds, enable onScreen progress bars, allow click or touch dismissal, and even pause the timer on hover. For a
react-notifications-component store-powered
flow, this level of control is genuinely rare in the React toast library space.

The method returns a unique notification id, which you can store and later pass to Store.removeNotification(id) for programmatic dismissal. This is useful for “loading” states — show a persistent notification, do your async work, then dismiss it and show a success or error in its place. Clean, predictable, no setTimeout gymnastics.

React Notification Hooks and Functional Component Integration

If you prefer keeping everything inside the React component model, react-notifications-component integrates just as cleanly with
React notification hooks
patterns. Since Store.addNotification() is a plain function call, it fits naturally inside useCallback, useEffect, or any custom hook you create around it.

// useNotify.js — a reusable custom hook
import { useCallback } from 'react';
import { Store } from 'react-notifications-component';

export function useNotify() {
  const notify = useCallback((type, title, message) => {
    Store.addNotification({
      title,
      message,
      type,
      insert: "top",
      container: "top-right",
      animationIn: ["animate__animated", "animate__slideInRight"],
      animationOut: ["animate__animated", "animate__slideOutRight"],
      dismiss: { duration: 3500, onScreen: true }
    });
  }, []);

  return { notify };
}

Encapsulating notification logic in a custom hook like this keeps your components lean and makes the notification configuration easy to standardize across the app. Need to change the default duration globally? One file. This approach also makes unit testing trivial — mock the Store import and assert the hook calls it with the right arguments.

For components that handle async operations, combine the hook with async/await: call notify('info', 'Working...', 'Please wait') before your fetch, capture the returned id, and call Store.removeNotification(id) in the finally block before showing the result notification. This pattern creates a polished, professional feedback loop that users actually notice and appreciate — which is the entire point of a
React alert notifications system.

Customization: Making Notifications Look Like Your App

Default styles are fine for prototypes. Production apps usually need more.
react-notifications-component customization
supports two levels: CSS overrides for the built-in types and full component replacement for complete control.

For CSS customization, the library’s stylesheet uses predictable class names like .notification-success, .notification-danger, and .notification-container-top-right. You can override these in your global stylesheet or CSS module. Changing colors, border-radius, font size, box-shadow — all standard. The library doesn’t use CSS-in-JS internally, so there’s no specificity war with styled-components or Emotion.

For full control, pass a React component to the content property of your notification config. This completely replaces the default template with anything you want — an icon set from Lucide, a progress indicator, a user avatar, a multi-line formatted message with action buttons. The content component receives no special props from the library, so you’re free to design it however fits your
Tailwind,
Material UI,
or custom design system.

// CustomNotification.jsx
export function CustomNotification({ title, message }) {
  return (
    <div className="custom-notification">
      <span className="icon">✅</span>
      <div>
        <strong>{title}</strong>
        <p>{message}</p>
      </div>
    </div>
  );
}

// Usage
Store.addNotification({
  content: <CustomNotification title="Done!" message="Item added to cart." />,
  container: "bottom-right",
  type: "default",
  dismiss: { duration: 3000 }
});

Animation Configuration and the animate.css Integration

Animations are configured through the animationIn and animationOut arrays in your notification config. These accept CSS class names — the library is designed to work with
animate.css
out of the box, but any CSS animation class will work. If you don’t want to pull in animate.css as a full dependency, you can write the two keyframes you actually need and reference your own classes.

# If using animate.css
npm install animate.css

# In your entry point
import 'animate.css/animate.min.css';

Common animation combinations for
React toast messages
include fadeIn/fadeOut for subtle feedback and slideInRight/slideOutRight for the classic toast feel. For error notifications that need attention, shakeX or bounceIn on entry creates a natural visual urgency without being obnoxious. The key is pairing animationIn and animationOut animations that feel directionally consistent — a notification that slides in from the right should leave to the right, not fade into nothing.

The animation duration can be separately tuned from the dismiss duration. A 300ms slide-in with a 4-second linger and a 200ms fade-out is a common and comfortable pattern. You don’t need to specify it explicitly if animate.css defaults work for you, but having the option matters in applications where motion sensitivity is a concern — you can disable or soften animations for users who prefer reduced motion by checking window.matchMedia('(prefers-reduced-motion: reduce)') and branching your notification config accordingly.

A Complete Working Example

The following is a fully self-contained
react-notifications-component example
covering four notification types triggered by button clicks. This is what a minimal but production-representative integration looks like — no boilerplate, no hand-waving.

// App.jsx
import React from 'react';
import { ReactNotifications, Store } from 'react-notifications-component';
import 'react-notifications-component/dist/theme.css';
import 'animate.css/animate.min.css';

const notify = (type, title, message) => {
  Store.addNotification({
    title,
    message,
    type,
    insert: "top",
    container: "top-right",
    animationIn: ["animate__animated", "animate__fadeInRight"],
    animationOut: ["animate__animated", "animate__fadeOutRight"],
    dismiss: {
      duration: 4000,
      onScreen: true,
      pauseOnHover: true,
      showIcon: true,
    },
  });
};

export default function App() {
  return (
    <>
      <ReactNotifications />
      <main style={{ padding: '2rem', display: 'flex', gap: '1rem' }}>
        <button onClick={() => notify('success', 'Success', 'Operation completed.')}>
          Success
        </button>
        <button onClick={() => notify('danger', 'Error', 'Something went wrong.')}>
          Error
        </button>
        <button onClick={() => notify('warning', 'Warning', 'Check your input.')}>
          Warning
        </button>
        <button onClick={() => notify('info', 'Info', 'New update available.')}>
          Info
        </button>
      </main>
    </>
  );
}

This pattern — a standalone notify() utility function at module scope — is arguably cleaner than the custom hook approach for simple use cases. It’s importable anywhere, testable without rendering, and adds zero overhead to your component trees. Scale it into a notifications.js service file with pre-built configurations for common scenarios (notifySuccess, notifyApiError, notifyNetworkTimeout) and you have a proper notification system in under 50 lines.

Common Pitfalls and How to Avoid Them

The most frequent issue developers hit with react-notifications-component is calling Store.addNotification() before <ReactNotifications /> has mounted. This typically happens in module-level initialization code, route guards, or store hydration logic that runs before the component tree renders. The fix is always the same: ensure <ReactNotifications /> is placed as high as possible in the component hierarchy — ideally as the very first child of your root component — and defer any Store calls until after the first render cycle.

Another common pain point is missing or misapplied CSS. If your notifications appear but have no styling, the theme import is either missing or being dropped by your bundler. For Vite users, make sure CSS files from node_modules are not excluded by your config. For Next.js users, the import can live in _app.js or layout.tsx at the top level — just not inside a dynamically imported component, or you’ll get a flash of unstyled notifications on first load.

Finally, if you’re seeing notifications stack infinitely or not dismiss, check your dismiss config. Omitting the duration field (or setting it to 0) creates a persistent notification that only dismisses on user action. That’s intentional behavior — but if it’s surprising you, add duration: 5000 and the problem disappears. Also note that pauseOnHover: true requires onScreen: true to be set; without it, the hover pause has nothing to display and the behavior may seem unpredictable.