Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

react
notification
communitycreator

How to handle React-notifications

Adyasha Mohanty

In this shot, we will go over how we to handle notifications in our React project. First, we’ll be using react-notifications, a notification component for React.

Installation

Go to the client project directory and install the following npm package:

npm install --save react-notifications

or

yarn add react-notifications

Setting up the notification container

Now, update the App.js file. Import NotificationContainer from react-notifications and the notifications.css file.

...
// React Notification
import 'react-notifications/lib/notifications.css';
import { NotificationContainer } from 'react-notifications';
...
...
return (
 <Router>
  <div>
   ...
   ...
   <NotificationContainer />
  </div>
 </Router>
);

So far, we have completed our setup for NotificationContainer.

Note: Only use one NotificationContainer component in the app.

Now, it’s time to pass notifications from different components to display their message.

Setting Notifications from components

// React Notification
import { NotificationManager } from 'react-notifications';

// Add this line where you want to show the notification
NotificationManager.info('Hey I am Adyasha', 'Info!', 2000);

Hooray, we did it! Now we can run our project.

Available NotificationManager APIs

You can apply this same method to different components in your project. Notifications will be displayed in different colors depending on the notification type. For this package, there are four different APIs available to us. They are of types:

  • Info
  • Success
  • Warning
  • Error

Here’s an example for the success type – simply replace success with the proper notification type for the given situation:

NotificationManager.success(message, title, timeOut, callback, priority);

You can also pass five different parameters along with the message: message, title, timeOut, callback, and priority.

The parameters that follow the notification type are:

  • message: The message we want to pass. It has to be a string.

  • title: The title of the notification. Again, its type is a string.

  • timeOut: The popup timeout in milliseconds. This has to be an integer.

  • callback: We can pass a function (type; function) through the notification. It will execute after the popup is called.

  • priority: This is a boolean parameter. We can push any notification to the top at any point by setting the priority to true.

And that’s all!

You can find me on Twitter @Adyasha8105.

RELATED TAGS

react
notification
communitycreator

CONTRIBUTOR

Adyasha Mohanty
Copyright ©2022 Educative, Inc. All rights reserved
RELATED COURSES

View all Courses

Keep Exploring