Ant Design Library has this component pre-built, and it is very easy to integrate as well. Modal Component provides a solid foundation for creating dialogs, lightboxes, popovers, etc. It is used to display Modal dialogs. We can use the following approach in ReactJS to use the Ant Design Modal Component.
Modal Props:
- afterClose: It is used to specify a function that will be triggered when the modal is closed completely.
- bodyStyle: It is used to denote the body style for the modal body element.
- cancelButtonProps: It is used to denote the cancel button props.
- cancelText: It is used to denote the text of the Cancel button.
- centered: It is used to make the Centered Modal.
- closable: It is used to indicate whether a close button is visible on the top right of the modal dialog or not.
- closeIcon: It is used for the custom close icon.
- confirmLoading: It is used to indicate whether to apply loading visual effect for OK button or not.
- destroyOnClose: It is used to indicate whether to unmount child components on onClose.
- focusTriggerAfterClose: It indicates whether you need to focus trigger element after dialog is closed or not.
- footer: It is used to define the footer content.
- forceRender: It is used to force render the Modal.
- getContainer: This function is used to return the mount node for Modal.
- keyboard: It is used to indicate whether to support press ESC to close or not.
- mask: It is used to indicate whether to show mask or not.
- maskClosable: It is used to indicate whether to close the modal dialog when the mask is clicked or not.
- maskStyle: It is used to define the style for modal’s mask element.
- modalRender: It is used for the custom modal content render.
- okButtonProps: It is used to define the ok button props.
- okText: It is used to denote the text of the OK button.
- okType: It is used to define the Button type of the OK button.
- style: It is used for the style of floating layer.
- title: It is used to define the modal dialog’s title.
- visible: It is used to indicate whether the modal dialog is visible or not.
- width: It is used to denote the width of the modal dialog.
- wrapClassName: It is used to pass the class name of the container of the modal dialog.
- zIndex: It is used to denote the z-index of the Modal.
- onCancel: This function that will be triggered when a user clicks mask, close or cancel button.
- onOk: This function that will be triggered when a user clicks the OK button.
Modal Methods:
- destroyAll(): This method is used to destroy all confirmation modal dialogs.
- useModal(): This method is used to return a contextHolder to insert into children when you use Context.
- info(): This method is used to handle the information.
- success(): This method is used to handle the success.
- error(): This method is used to handle the error.
- warning(): This method is used to handle the warning.
- confirm(): This method is used to handle the confirmation.
Modal Method Object Props:
- afterClose: It is used to specify a function that will be triggered when the modal is closed completely.
- autoFocusButton: It is used to specify which button to autofocus.
- bodyStyle: It is used to denote the body style for the modal body element.
- cancelButtonProps: It is used to denote the cancel button props.
- cancelText: It is used to denote the text of the Cancel button.
- centered: It is used to make the Centered Modal.
- className: It is used to pass the className of container.
- closable: It is used to indicate whether a close button is visible on the top right of the modal dialog or not.
- closeIcon: It is used for the custom close icon.
- content: It is used to define the Content.
- getContainer: This function is used to return the mount node for Modal.
- icon: It is used for the custom icon.
- keyboard: It is used to indicate whether to support press ESC to close or not.
- mask: It is used to indicate whether to show mask or not.
- maskClosable: It is used to indicate whether to close the modal dialog when the mask is clicked or not.
- maskStyle: It is used to define the style for modal’s mask element.
- okButtonProps: It is used to define the ok button props.
- okText: It is used to denote the text of the OK button.
- okType: It is used to define the Button type of the OK button.
- style: It is used for the style of floating layer.
- title: It is used to define the modal dialog’s title.
- width: It is used to denote the width of the modal dialog.
- zIndex: It is used to denote the z-index of the Modal.
Creating React Application And Installing Module:
-
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 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, { useState } from 'react'; import "antd/dist/antd.css"; import { Modal, Button } from 'antd'; export default function App() { const [isModalVisible, setIsModalVisible] = useState(false); return ( <div style={{ display: 'block', width: 700, padding: 30 }}> <h4>ReactJS Ant-Design Modal Component</h4> <> <Button type="secondary" onClick={() => { setIsModalVisible(true); }}> Click to open Modal </Button> <Modal title="Modal Title" visible={isModalVisible} onOk={() => { setIsModalVisible(false); }} onCancel={() => { setIsModalVisible(false); }}> <p>Sample Modal contents</p> </Modal> </> </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/modal/
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!
