How To Create Custom Alerts in React Using React-Notifications-Component

Alert messages are pop-up messages that display information to users. Alert messages convey critical information to users within a web application. This article provides information on creating custom alert messages in your React application using the react-notifications-component library.

The react-notifications-component library is a lightweight, flexible library that allows you to create customizable notification messages within your React application. It has a simple API and can be easily integrated into any React project.

Installing React-Notifications-Component

To install react-notifications-component, open your npm terminal window and enter the following command:

npm install react-notifications-component

This will install the react-notifications-component library and all of its dependencies.

Setting Up React-Notification-Component

To use the react-notification-component library, you import the ReactNotification element and the corresponding theme CSS file into your app component. This will allow you to utilize the various features and functionality provided by the library.

For example:

import { ReactNotifications } from "react-notification-component";
import "react-notifications-component/dist/theme.css";

function App() {
    return (
        <>
            <ReactNotifications />
        </>
    )
}

To start creating notifications, import the Store module into your desired component and use the Store.addNotification() method:

import React from "react";
import { Store } from "react-notifications-component";

function Page() {

    const notification = () => Store.addNotification({
        title: "Wonderful!",
        message: "Welcome!!!",
        type: "success",
        insert: "top",
        container: "top-right",
        animationIn: ["animate__animated", "animate__fadeIn"],
        animationOut: ["animate__animated", "animate__fadeOut"],
        dismiss: {
          duration: 5000,
          onScreen: true
        }
      });

    return (
        <div>   
            <button onClick={notification}>Click Me!!</button>
        </div>
    )
}

export default Page;

In the code block above, clicking the button will cause an alert notification with the message “Welcome” to display on the screen.

Understanding the Properties of a Notification Object

A notification object contains certain properties that will confuse a new user. A typical notification object will look like this:

const notification = {
    title: "Wonderful!",
   message: "Welcome!!!",
   type: "success",
   insert: "top",
   container: "top-right",
   animationIn: ["animate__animated", "animate__fadeIn"],
   animationOut: ["animate__animated", "animate__fadeOut"],
   dismiss: {
      duration: 5000,
      onScreen: true
   }
}

The message property contains the message displayed on the screen. The type property contains the type of notification. There are five types of notifications: danger, default, success, info, and warning. The color styling of your notification will vary based on the type of notification; this is to help the user understand what has occurred without having to read the message.

The animationIn and animationOut properties are used for animating your notifications entrances and exits. The animationIn and animationOut properties are arrays of CSS classes for controlling your notification’s entrance and exit animations.

Positioning Your Notifications Using the Insert and Container Properties

The insert property of the notification object determines where the notification will be inserted in the container. It takes in the top and bottom values. By setting the insert prop to the top, the notification will be inserted at the top of the container. If it is set to the bottom, the notification is inserted at the bottom of the container.

The container property determines the actual position of the notification. It takes in seven values top-right, top-left, top-center, center, bottom-right, bottom-left, and bottom-center.

For example:

Store.addNotification({
  ...notification,
    insert: 'top',
  container: 'top-right'
})

In the code block above, the notification will display at the top right side of the screen.

Understanding the Dismiss Property of the Notification Object

The dismiss property determines how a notification will be rejected. It is an object containing various properties such as duration, onScreen, and pauseOnHover.

The duration property determines how long the notification will display before closing. It takes in numbers in milliseconds.

For example:

Store.addNotification({
  ...notification,
    dismiss: {
        duration: 3000,
    },
})

The notification above will only display for 3 seconds. To ensure that your notification does not dismiss automatically, you set the duration value to 0. When the duration value is set to 0, the user must click on the notification to close it.

The onScreen property takes in a boolean value. If the onScreen value is true, the notification will display a bar informing the user of how much time the notification has left. If the onScreen value is false, the bar will not display.

Like so:

Store.addNotification({
  ...notification,
    dismiss: {
        onScreen: false,
    },
})

The pauseOnHover property is used to modify the notification’s automatic dismissal behavior. It takes in a boolean value. By setting the pauseOnHover value to true, the user will be able to stop the notification from closing automatically by hovering over the notification. By setting the pauseOnHover value to false, the user cannot prevent the notification from closing automatically.

For example:

Store.addNotification({
  ...notification,
    dismiss: {
        duration: 3000,
        pauseOnHover: true,
    },
})

Customizing Your Notifications

You can customize your notifications to your satisfaction. To customize your notification with your CSS styles, use a React component as a notification and style it.

To use a React component as a notification, you use the content property of the notification object.

For example:

import MyNotification from "./MyNotification";

const notification = () => {
    Store.addNotification({
        content: MyNotification,
        container: 'bottom-right',
      animationIn: ["animate__animated", "animate__fadeIn"],
    animationOut: ["animate__animated", "animate__fadeOut"],
      dismiss: {
        duration: 3000
      },
    })
}

function App() {
    return (
        <div>
            <button onClick={notification}>Click<button>
        </div>
    )
}

In the code block above, you imported the already created React component MyNotification and passed it as the content property value.

Conclusion

The react-notifications-component library is a simple and efficient way to add notifications to your application. With the react-notifications-component, you can easily create and customize alerts that specific events or user interactions can trigger. This article covered only a few features, excluding animation options, touch gestures, etc. Still, with the information provided, you can effectively start using the react-notifications-component library.