DEV Community

loading...
Cover image for Add Notifications to your React application

Add Notifications to your React application

Semir Teskeredzic
・2 min read

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
Enter fullscreen mode Exit fullscreen mode

Then you need to build library:

$ npm run build:library:dev
Enter fullscreen mode Exit fullscreen mode

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'
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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'
Enter fullscreen mode Exit fullscreen mode

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
  }
});

Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Types:

type:
- success
- danger
- info
- default
- warning
Enter fullscreen mode Exit fullscreen mode

You can find more in the package documentation here.

Thank you for reading and happy notifying!

Discussion (0)