DEV Community

loading...
Cover image for React-Notifications ⚠️

React-Notifications ⚠️

Adyasha Mohanty
Creative Frontend Developer. Works with React and JS.
・2 min read

Here I’ll show how we can handle notifications in our React project. First, we’ll be using react-notifications🔔, which, as its name suggests, is 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>
);
Enter fullscreen mode Exit fullscreen mode

So far, we have completed our setup for NotificationContainer.

NOTE: Use only 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);

Enter fullscreen mode Exit fullscreen mode

Horray, you did it. Now you can run your 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 of the following types:

  • info
  • success
  • warning
  • error

Image

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 described below:

  • 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 executes 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.

That's all. Thanks for your patience ❤️! Have a nice day ;)

Find me on Twitter @Adyasha8105👀.

Discussion (2)

Collapse
link2twenty profile image
Andrew Bone

Isn't the gif of toastify?

Collapse
adyasha8105 profile image
Adyasha Mohanty Author

Yeah but the meaning behind this gif is to show what is notification basically. I will change it. Thanks :D

Forem Open with the Forem app