ReactJS UI Ant Design Notification Component

Ant Design is a popular UI framework for React that provides a set of high-quality components to help developers build modern and responsive web applications. Among these components, the Notification component is a useful tool for displaying brief messages to the user, such as alerts, updates, or status notifications.

In this article, we’ll explore the basics of using the Ant Design Notification component and will discuss its features.

Ant Design Notification Component

The Notification component in Ant Design is a global notification system that displays temporary messages in a small pop-up. It allows you to deliver real-time notifications or alerts to users, typically at the top right corner of the screen. The component supports various types of notifications, such as informational, success, warning, and error messages, making it a versatile tool for user feedback.

Notification Config Props:

• bottom: When the placement is bottomRight or bottomLeft, it is used to denote the distance from the bottom of the viewport.
• btn: It is used for the customized close button.
• className: It is used for the customized CSS class.
• closeIcon: It is used for the custom close icon.
• description: It is used to denote the content of the notification box.
• duration: It is used to set the time before Notification is closed. Unit is seconds.
• getContainer: It is used to return the mount node for the notification.
• icon: It is used for the customized icon.
• key: It is used for the unique identity of the Notification.
• message: It is used to denote the title of the notification box.
• placement: It is used to position the Notification. Values can be topLeft, topRight, bottomLeft, and bottomRight.
• style: It is used for the customized inline style.
• top: When placement is topRight or topLeft, it is used to denote the distance from the top of the viewport.
• onClick: It is a callback function that is triggered when the notification is clicked.
• onClose: It is a callback function that is triggered when the notification is closed.

Notification Default Config Props:

• bottom: When the placement is bottomRight or bottomLeft, it is used to denote the distance from the bottom of the viewport.
• closeIcon: It is used for the custom close icon.
• duration: It is used to set the time before Notification is closed. Unit is seconds.
• getContainer: It is used to return the mount node for the notification.
• placement: It is used to position the Notification. Values can be topLeft, topRight, bottomLeft, and bottomRight.
• rtl: It is used to indicate whether to enable RTL mode or not.
• top: When placement is topRight or topLeft, it is used to denote the distance from the top of the viewport.

Steps To Implement Ant Design Notification Component

Step 1: Create a React application using the following command

npx create-react-app foldername
cd foldername

Step 2: Install the required module using the following command:

npm install antd

Project Structure

Dependencies

"dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "antd": "^5.21.2",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  }

Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.

import React from 'react'
import { Button, notification } from 'antd';

export default function App() {
    return (
        <div style={{
            display: 'block', width: 700, padding: 30
        }}>
            <h4>ReactJS Ant-Design Notification Component</h4>
            <Button type="primary" onClick={() => {
                notification.open({
                    message: 'Sample-Notification-Title',
                    description:
                        'Sample Notification Description',
                    onClick: () => {
                        console.log('Notification Clicked!');
                    },
                });
            }}>
                Click to see Notification Box
            </Button>
        </div>
    );
}

Run the application using the following command

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output: