Proper notifications are crucial for functional UI. Imagine you are using one of many web applications and you enter a wrong password or any kind of input just to see that nothing happens and you are left baffled. That is why integrating notifications, alerts or other kind of signals what has happened is important for any application with user interface.

In this post I will go through the simple integration of react-notifications-component library that has some 23k of weekly downloads on npmjs.com.

Add package to your project

You can use npm to add this package:

$ npm i react-notifications-component

Then you need to build library:

$ npm run build:library:dev

You are ready to go! Now you can start your application

Import and Setup

Now in your App.js you need to import ReactNotification and its css file like so:

import ReactNotification from 'react-notifications-component'
import 'react-notifications-component/dist/theme.css'

Now we put ReactNotification component alongdside of our main app content in order not to collide with other absolute positioned elements:

function App() {
  return (
    <div>
        <ReactNotification />
        <Application />
    </div>
  )
}

export default App;

We are now ready to use notification when we need it.

Use in Component

Let's say you have a small component that throws a great success notification when you enter your name and click hello button and it throws bad red notification when you don't enter your name but nevertheless click hello button.

First we import store from our new package:

import { store } from 'react-notifications-component'

Notification is called like this:

store.addNotification({
  title: "Success!",
  message: "You have been successful!",
  type: "success",
  insert: "top",
  container: "top-right",
  animationIn: ["animate__animated", "animate__fadeIn"],
  animationOut: ["animate__animated", "animate__fadeOut"],
  dismiss: {
    duration: 5000,
    onScreen: false
  }
});

To see the notification in action we will create a component that will evaluate if the user entered name, if yes then success notification will be executed if not then danger notification will be executed. So here is a simple component:

import React, { useState } from "react";
import { store } from "react-notifications-component";

function Application() {
  const [name, setName] = useState("");

  const handleChange = (e) => {
    setName(e.target.value);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (name) {
      store.addNotification({
        title: "Great",
        message: `Hello ${name}`,
        type: "success",
        insert: "top",
        container: "top-right",
        animationIn: ["animate__animated", "animate__fadeIn"],
        animationOut: ["animate__animated", "animate__fadeOut"],
        dismiss: {
          duration: 5000,
          onScreen: false
        }
      });
      setName("");
    } else {
      store.addNotification({
        title: "OOh OOh!",
        message: "Don't be shy!",
        type: "danger",
        insert: "top",
        container: "top-right",
        animationIn: ["animate__animated", "animate__fadeIn"],
        animationOut: ["animate__animated", "animate__fadeOut"],
        dismiss: {
          duration: 5000,
          onScreen: false
        }
      });
    }
  };

  return (
    <>
      <input
        value={name}
        onChange={(e) => handleChange(e)}
        placeholder="Enter name here!"
      />
      <button onClick={(e) => handleSubmit(e)}>Say Hello</button>
    </>
  );
}

export default Application;

Simple setup is available in codesandbox here

You can configure notifications object with values:

Position:

container:
- top-left
- top-right
- top-center
- center
- bottom-left
- bottom-right
- bottom-center

Types:

type:
- success
- danger
- info
- default
- warning

You can find more in the package documentation here.

Thank you for reading and happy notifying!

Blog

Add Notifications to your React application

Semir Teskeredzic

Add package to your project

Import and Setup

Use in Component

Position:

Types:

Join Our Newsletter. No Spam, Only the good stuff.

Related