Display Ant Design notification in React

The role of notifications in web apps

Notifications are vital in enhancing user engagement and communication within web applications. Here are some key scenarios where notifications prove invaluable:

• Real-time updates: Notifications enable developers to deliver real-time updates to users, informing them about important events or changes.

• User feedback: Notifications provide immediate feedback on user actions, such as successful form submissions or errors, which enhances the overall user experience.

• Alerts and warnings: Notifications are instrumental in alerting users to critical information, warnings, or time-sensitive messages.

Notifications in Ant Design

Ant Design, a prominent React UI library, offers a powerful Notification component that simplifies the implementation of this essential feature. Here are some standout benefits:

• Customization: Ant Design Notification allows developers to tailor the appearance and behavior of notifications. Developers can customize the content, duration, and position to align with their application’s design principles.

• Variety of styles: Developers can choose from various notification styles, including success, information, warning, and error. Each style is visually distinct, ensuring that users can quickly grasp the nature of the notification.

• Stacking and queue: Ant Design Notification supports stacking multiple notifications and managing them in a queue. This ensures a systematic display of notifications, preventing information overload for users.

• Event handling: The Notification component provides callback functions to handle events such as notification close, click, and more. This enables developers to implement custom logic based on user interactions.

Installation

To get started, we first need to install the Ant Design (antd) library in our React project. We can use either of the following installation commands:

Code example

Let’s look at the notification in action in the following code example:

Code explanation

In the App.js file:

• Lines 2–8: We import the notification and Button components, along with a few antd icons.

• Line 12: We define a function named openNotification that takes type and placement as parameters.

• Line 13: This function uses antd’s notification[type] method to display notifications with dynamic content based on the provided parameters.

• Lines 14–16: The message parameter dynamically sets the notification message based on the type and placement.

• Line 17: The description parameter dynamically sets the notification description based on the type.

• Line 18: We set the duration for which the notification will be displayed for 3 seconds.

• Line 19: The placement of the notification in the wiondow is set based on the parameter.

• Lines 27–33: We create a primary button called “Success” with a CheckCircleOutlined icon. The button is associated with a specific onClick event handler that triggers the openNotification function with corresponding parameters. The success parameter determines the type of notification. The topLeft parameter determines the placement of the notification on the window.

• Lines 34–54: We perform the same steps and create a set of buttons for other notification types, assigning each a different placement on the window.