Thursday, December 26, 2024
Google search engine
HomeLanguagesReactJS UI Ant Design Popconfirm Component

ReactJS UI Ant Design Popconfirm Component

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/

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!

RELATED ARTICLES

Most Popular

Recent Comments