ReactJS UI Ant Design Notification Component - GeeksforGeeks

01 Jun, 2021
Ant Design Library has this component pre-built, and it is very easy to integrate as well. Notification Component is used to display a notification message globally. We can use the following approach in ReactJS to use the Ant Design Notification Component.
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.
Creating React Application And Installing Module:
Step 1: Create a React application using the following command:npx create-react-app foldername
Step 1: Create a React application using the following command:
npx create-react-app foldername
Step 2: After creating your project folder i.e. foldername, move to it using the following command:cd foldername
Step 2: After creating your project folder i.e. foldername, move to it using the following command:
cd foldername
Step 3: After creating the ReactJS application, Install the required module using the following command:npm install antd
Step 3: After creating the ReactJS application, Install the required module using the following command:
npm install antd
Project Structure: It will look like the following.
Project Structure
Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.
App.js
import React from 'react'import "antd/dist/antd.css";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>  );}
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output:
Reference: https://ant.design/components/notification/
ReactJS-Ant Design
ReactJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
How to fetch data from an API in ReactJS ?
How to redirect to another page in ReactJS ?
How to pass data from child component to its parent in ReactJS ?
Create a Responsive Navbar using ReactJS
How to pass data from one component to other component in ReactJS ?
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?