Popconfirm is a simple and compact confirmation dialog of an action. It is basically used to ask for user confirmation.
Ant Design Library has this component pre-built, and it is very easy to integrate as well. We can use this Popconfirm component using the following process easily.
Syntax:
<Popconfirm
title="Open Popconfirm?"
onConfirm={confirm}
onCancel={cancel}
okText="Yes"
cancelText="No"
>
<a href="#">Open Popconfirm</a>
</Popconfirm>
Popconfirm Property:
- cancelButtonProps: This property used for cancel button props
- cancelText: This property used for the text of the Cancel button
- disabled: This property will show popconfirm when clicking its childrenNode
- icon: This property is used for Customize icon of confirmation
- okButtonProps: This property is used for ok button props
- okText: This property will show the text of the Confirm button
- okType: This property is used for identify Button type of the Confirm button
- title: This property is used for the title of the confirmation box
- onCancel: This property is a callback of cancel
- onConfirm: This property is a callback of confirmation
Creating React Application And Installing Module:
-
Step 1: Create a React application using the following command.
npx create-react-app demo
-
Step 2: After creating your project folder i.e. demo, move to it using the following command.
cd demo
-
Step 3: After creating the ReactJS application, Install the antd library using the following command.
npm install antd
Project Structure:
Example: Now write the following code in filename app.js.
app.js
import { Popconfirm, message } from "antd"; import "./App.css"; import "antd/dist/antd.css"; function App() { function confirm(e) { console.log(e); message.success("Click on Yes"); } function cancel(e) { console.log(e); message.error("Click on No"); } return ( <div className="App"> <div style={{ padding: "100px" }}> <h1>Demo for Popconfirm</h1> <Popconfirm title="Are you sure to delete this task?" onConfirm={confirm} onCancel={cancel} okText="Yes" cancelText="No" > <a href="#">Delete</a> </Popconfirm> </div> </div> ); } export default App; |
Running the application: Run the application by using the following command.
npm start
Output: Now open your browser and go to http://localhost:3000/, You will see the following output.
Reference Link: https://ant.design/components/popconfirm/
