react-notifications-component, a Powerful React Notifications Library

In this article, we’ll look at the new release of react-notifications-component (v2.0.6). It’s a React component that provides you with a fully-featured notification system that will save you the time & effort of building one yourself.

Let’s start by installing it, along with animate.css:

npm install --save react-notifications-component animate.css

We’re using animate.css for animating how the notifications enter/exit, but you can use any class-based animation library that you prefer.

Basic Usage

While this library is incredibly feature-packed you can get going really quickly because the setup/config steps are pretty minimal:

import React from 'react';
import ReactNotifications from 'react-notifications-component';
import Homepage from './Homepage';

function App() {
  return (
    <div>
      <ReactNotifications />
      <Homepage/>
    </div>
  );
};

Under the hood it uses the Context API so you only need to include it once in your app, and you’ll be able to use it anywhere. You’ll likely want to place <ReactNotifications /> near the top-level of your app.

To start showing notifications, import the store module to any of your components, and use store.addNotification() method:

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

function Homepage() {
  return (
    <>
      My Website
      <button
        onClick={() => {
          store.addNotification({
            title: 'Dropbox',
            message: 'Files were synced',
            type: 'default',                         // 'default', 'success', 'info', 'warning'
            container: 'bottom-left',                // where to position the notifications
            animationIn: ["animated", "fadeIn"],     // animate.css classes that's applied
            animationOut: ["animated", "fadeOut"],   // animate.css classes that's applied
            dismiss: {
              duration: 3000 
            }
          })
        }}
      >
        Add notification
      </button>
    </>
  )
}

Try clicking the button!

There’s several notification types that are included: success, warning, info, and default.

Customizing Notifications

If you need your own CSS styles for your notifications, you can actually use any valid React element as a notification!

function Homepage() {
  return (
    <>
      My Website
      <button
        onClick={() => {
          store.addNotification({
            content: MyNotification,
            container: 'bottom-right',
            animationIn: ["animated", "fadeIn"],  
            animationOut: ["animated", "fadeOut"],
            dismiss: {
              duration: 3000
            }
          })
        }}
      >
        Add notification
      </button>
    </>
  )
}

function MyNotification() {
  return (
    <div style={{
      display: 'flex',
      backgroundColor: '#0f2f26',
      borderRadius: 5,
    }}>
      <AlligatorAvatar/>
      <div>
        <h4>Alligator.io</h4>
        <p>Has joined the chat</p>
      </div>
    </div>
  )
}

Wrapping Up

If you need a notifications system for your React app you should definitely try react-notifications-component! There’s so many features that weren’t covered including desktop/mobile compatibility, animation options, touch gestures, and responsive design.