Add Notifications to your React application
Tags: react, tutorial
Published: 2021-06-13 20:32:24

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](https://codesandbox.io/s/old-http-dznz8?file=/src/Application.js)

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](https://www.npmjs.com/package/react-notifications-component).

Thank you for reading and happy notifying!