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/
