ReactJS UI Ant Design Popconfirm Component

Last Updated : 31 Mar, 2021

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; 