Tutorial

react-notifications-component, a Powerful React Notifications Library

Published on September 1, 2019
author

William Le

react-notifications-component, a Powerful React Notifications Library

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

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:

  1. 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:

App.js
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:

Homepage.js
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!

Note: You might see a full-width notification if you’re viewing this on a small device.

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!

Homepage.js
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>
    </>
  )
}
MyNotification.js
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>
  )
}

Note: Additional configurations details can be found in the documentation.

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.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about our products


About the authors
Default avatar
William Le

author

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
Leave a comment


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Featured on Community

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel