Use React Notifications Component

I was working on a React project for a client in New York that needed real-time notifications for user actions, things like “Payment Successful” or “Profile Updated.” I wanted a solution that looked great, was easy to set up, and didn’t require building everything from scratch.

That’s when I started using the React Notifications Component. It’s a powerful yet lightweight library that lets you create beautiful notifications in seconds. In this tutorial, I’ll walk you through exactly how I use it step by step, so you can quickly add it to your own React projects.

What Is the React Notifications Component?

The React Notifications Component is a ready-to-use library that helps you display customizable toast-style notifications in your React app. It’s built for developers who want flexibility and simplicity without compromising design.

You can show success messages, warnings, or even custom alerts, all with just a few lines of code.

Install the React Notifications Component

Let’s start by installing the package. Open your terminal in your React project and run:

npm install react-notifications-component react-transition-group

The react-transition-group dependency is required for the animations to work smoothly.

Once installed, you’ll need to import the component and the CSS styles.

Method 1 – Set Up Basic Notifications

Here’s how I usually start when I want to quickly add notifications to an app.

Step 1: Import and Initialize

In your main app file (for example, App.js), import and render the notification container at the top level so it can handle notifications globally.

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

function App() {
  const handleNotify = () => {
    Store.addNotification({
      title: "Success!",
      message: "Your payment has been processed successfully.",
      type: "success",
      insert: "top",
      container: "top-right",
      animationIn: ["animate__animated", "animate__fadeIn"],
      animationOut: ["animate__animated", "animate__fadeOut"],
      dismiss: {
        duration: 3000,
        onScreen: true
      }
    });
  };

  return (
    <div className="App">
      <ReactNotifications />
      <h2>React Notifications Demo</h2>
      <button onClick={handleNotify}>Show Notification</button>
    </div>
  );
}

export default App;

Step 2: Run the App

Now, start your React app:

npm start

You can refer to the screenshot below to see the output.

Click the Show Notification button, and you’ll see a sleek success message appear in the top-right corner of your screen. That’s how easy it is to get started!

Method 2 – Use Different Notification Types

Depending on the situation, I often use different notification types, for example, when handling form submissions or API responses.

Here are the built-in types you can use:

• success – for successful actions
• danger – for errors or failed actions
• info – for informational alerts
• default – for neutral messages
• warning – for cautionary alerts

Here’s a quick example that shows multiple types:

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

function NotificationTypesDemo() {
  const showNotification = (type) => {
    Store.addNotification({
      title: type.toUpperCase(),
      message: `This is a ${type} notification.`,
      type: type,
      insert: "top",
      container: "top-center",
      animationIn: ["animate__animated", "animate__fadeInDown"],
      animationOut: ["animate__animated", "animate__fadeOutUp"],
      dismiss: {
        duration: 2500,
        onScreen: true
      }
    });
  };

  return (
    <div>
      <ReactNotifications />
      <h3>React Notification Types</h3>
      <button onClick={() => showNotification("success")}>Success</button>
      <button onClick={() => showNotification("danger")}>Error</button>
      <button onClick={() => showNotification("info")}>Info</button>
      <button onClick={() => showNotification("warning")}>Warning</button>
    </div>
  );
}

export default NotificationTypesDemo;

You can refer to the screenshot below to see the output.

This approach is great for dashboards or web apps where you need different alerts for different actions, for instance, confirming a user’s order or warning them about missing input.

Method 3 – Customize the Notification Design

One thing I love about this component is how easy it is to customize. You can change the position, animation, duration, and even style.

Here’s an example where I customized the display position and duration:

Store.addNotification({
  title: "Heads Up!",
  message: "Your session will expire soon. Please save your work.",
  type: "warning",
  insert: "bottom",
  container: "bottom-left",
  animationIn: ["animate__animated", "animate__zoomIn"],
  animationOut: ["animate__animated", "animate__zoomOut"],
  dismiss: {
    duration: 5000,
    pauseOnHover: true
  }
});

You can refer to the screenshot below to see the output.

You can also use CSS to override the default theme and make it match your app’s branding.

Method 4 – Trigger Notifications from Anywhere in Your App

In real-world projects, I often need to trigger notifications from multiple components, not just the main one. Since the Store object is globally accessible, you can import it anywhere and call Store.addNotification() directly.

For example, in a separate component:

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

function PaymentButton() {
  const handlePayment = () => {
    // Simulate payment process
    setTimeout(() => {
      Store.addNotification({
        title: "Payment Successful!",
        message: "Your order has been confirmed.",
        type: "success",
        insert: "top",
        container: "top-right",
        dismiss: {
          duration: 3000,
          onScreen: true
        }
      });
    }, 1000);
  };

  return <button onClick={handlePayment}>Pay Now</button>;
}

export default PaymentButton;

This flexibility is what makes the React Notifications Component perfect for scalable apps.

Common Use Cases

Here are a few practical scenarios where I’ve used this component in U.S.-based projects:

• E-commerce apps – showing “Item added to cart” or “Payment successful” alerts
• Admin dashboards – notifying users when reports are generated or data is updated
• Form submissions – showing validation errors or success messages
• Finance apps – alerting users about transaction updates or account changes

Best Practices

• Keep notifications short and clear.
• Use consistent colors for different message types.
• Avoid overusing notifications — too many can overwhelm users.
• Always include a meaningful title and message.
• Test on mobile devices to ensure proper positioning.

When I first started using this library, I was impressed by how quickly I could integrate it into both small and large-scale React projects. It’s lightweight, customizable, and works seamlessly with modern frameworks like Next.js or Vite.

If you’re building a React app and want to display professional-looking notifications without much setup, the React Notifications Component is one of the best options available today.

You may also like to read:

• Build a Dynamic Star Rating Component in React
• How to Use a React Time Picker Component
• How to Import SVG as a React Component
• Make a Component Draggable in React

Bijay Kumar

I am Bijay Kumar, a Microsoft MVP in SharePoint. Apart from SharePoint, I started working on Python, Machine learning, and artificial intelligence for the last 5 years. During this time I got expertise in various Python libraries also like Tkinter, Pandas, NumPy, Turtle, Django, Matplotlib, Tensorflow, Scipy, Scikit-Learn, etc… for various clients in the United States, Canada, the United Kingdom, Australia, New Zealand, etc. Check out my profile.

enjoysharepoint.com/