How To Create Custom Alerts in React Using React-Notifications-Component
Tags: webdev, react, tutorial
Published: 2023-02-10 08:51:31

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:

```bash
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:

```jsx
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: 

```jsx
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:

```jsx
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:

```jsx
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:

```jsx
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:

```jsx
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:

```jsx
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:

```jsx
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.