ReactJS UI Ant Design Modal Component

Modal Props

The Ant Design Modal component is a highly customizable and feature-rich modal dialog component for React applications. It allows you to display pop-up dialogs, modals, or overlays on your web page to interact with users or display additional information.

Here are some commonly used props for the antd modal Select component :

• visible (boolean) : Determines whether the modal is visible or hidden.
• title (string | ReactNode) : Sets the title of the modal.
• closable (boolean) : Specifies whether the modal can be closed using the close button or the ESC key.
• mask (boolean) : Controls whether a backdrop (mask) is displayed behind the modal to prevent interaction with elements outside the modal.
• maskClosable (boolean) : Determines whether clicking on the mask should close the modal.
• destroyOnClose (boolean) : If set to true, the modal's content will be unmounted when it's closed, and mounted again when opened.
• keyboard (boolean) : Enables or disables keyboard interactions for the modal, such as pressing the ESC key to close it.
• footer (ReactNode | null) : Allows you to customize the footer content of the modal.
• onCancel (function) : A callback function that is called when the modal is canceled or closed.
• onOk (function) : A callback function that is called when the modal's OK button is clicked.
• okText (string) : Sets the text for the OK button.
• cancelText (string) : Sets the text for the Cancel button.
• okButtonProps (object) : Additional props to customize the OK button.
• cancelButtonProps (object) : Additional props to customize the Cancel button.
• afterClose (function) : A callback function that is called after the modal is closed and the animation is completed.
• width (string | number) : Sets the width of the modal.
• style (object) : Allows you to apply custom CSS styles to the modal.
• className (string) : Sets the CSS class for the modal.
• getContainer (HTMLElement | function) : Specifies the container DOM element in which the modal will be rendered. By default, it is appended to the document body.
• forceRender (boolean) : Forces the modal to render its content, even if it's not currently visible.
• zIndex (number) : Sets the z-index of the modal, allowing you to control its stacking order.
• maskStyle (object) : Applies custom styles to the modal's mask element.

These are some of the essential props for the Ant Design Modal component in React. Depending on your specific requirements, you can use these props to configure and customize the modal to suit your application's needs.

Modal Methods

The Antd modal component in React provides various methods that allow you to interact with and control the modal programmatically. Here are some of the commonly used methods :

• Modal.info(config) : Displays an information modal with the specified configuration. This method is typically used for displaying non-critical information or messages.
• Modal.success(config) : Displays a success modal with the specified configuration. It is often used to notify users of successful actions.
• Modal.error(config) : Shows an error modal with the specified configuration. This method is used to inform users about errors or failures.
• Modal.warning(config) : Displays a warning modal with the specified configuration. It is useful for alerting users to potential issues or warnings.
• Modal.confirm(config) : Shows a confirmation modal with the specified configuration. This method is commonly used to confirm critical actions, such as deleting data.
• Modal.destroyAll() : Closes and destroys all open modals. This can be helpful when you want to clean up modals that are no longer needed.

These methods allow you to create and control different types of modals with varying content and behavior. Each method takes a config object as an argument, which allows you to customize the modal's properties, such as its title, content, and callback functions.

Model Method Object Props

When you use one of the Modal methods (e.g., Modal.info, Modal.success, Modal.error, Modal.warning, or Modal.confirm), you pass an object as an argument to configure the modal. This object can have various props to customize the modal's appearance and behavior. Here are the commonly used props for the configuration object :

• title (string | ReactNode) : Sets the title of the modal.
• content (string | ReactNode) : Defines the content of the modal, which can be a string or a ReactNode (e.g., JSX elements).
• onOk (function) : A callback function that is executed when the user clicks the "OK" button or confirms the modal.
• onCancel (function) : A callback function that is executed when the user clicks the "Cancel" button or closes the modal.
• okText (string) : Sets the text for the "OK" button.
• cancelText (string) : Sets the text for the "Cancel" button.
• okButtonProps (object) : Additional props to customize the "OK" button.
• cancelButtonProps (object) : Additional props to customize the "Cancel" button.
• icon (ReactNode) : Allows you to specify a custom icon for the modal. You can use Ant Design's icon components or your custom React elements.
• width (string | number) : Sets the width of the modal.
• style (object) : Applies custom CSS styles to the modal.
• className (string) : Sets the CSS class for the modal.
• centered (boolean) : Determines whether the modal is centered on the screen.
• mask (boolean) : Controls whether a backdrop (mask) is displayed behind the modal to prevent interaction with elements outside the modal.
• maskClosable (boolean) : Determines whether clicking on the mask should close the modal.
• keyboard (boolean) : Enables or disables keyboard interactions for the modal, such as pressing the ESC key to close it.
• afterClose (function) : A callback function that is executed after the modal is closed and the animation is completed.
• getContainer (HTMLElement | function) : Specifies the container DOM element in which the modal will be rendered. By default, it is appended to the document body.
• zIndex (number) : Sets the z-index of the modal, allowing you to control its stacking order.
• maskStyle (object) : Applies custom styles to the modal's mask element.

These props allow you to tailor the appearance and behavior of the modal to suit your specific use case when using one of the Modal methods in Ant Design. You can choose the appropriate props to create modals with different styles, content, and interactions.

Creating React Application And Installing Module

Create a React Application : Open your terminal or command prompt. Navigate to the directory where you want to create your React application. You can use the cd command to change directories.

Create a new React application using Create React App, a popular tool for setting up React projects:

Replace my-react-app with the name of your application.

Wait for the project to be created. Once it's finished, you can navigate to the project folder:

Project Structure

Here's an example project structure for your React application :

Here's a brief description of the key directories and files :

• node_modules/ : This directory contains all the installed dependencies and modules for your project. You don't need to manage this manually; npm takes care of it.
• public/ : This directory contains public assets and the main index.html file, which serves as the entry point for your React application.
• src/ : This is where you'll put your source code.
• index.js : The main entry point for your React application, where it gets rendered to the DOM.
• App.js : The root component of your application.
• components/ : A directory where you can create reusable React components.
• assets/ : You can store static assets like images, styles, or other files here.
• package.json and package-lock.json : These files contain information about your project and its dependencies.
• README.md : Documentation for your project.
• .gitignore : Specifies which files or directories should be ignored when using Git for version control.
• .env : Configuration file for environment variables (optional).

Installing Modules

To install additional modules for your React application, you can use the npm install command. For example, if you want to install the Ant Design library, you can run :

This command will download and install the Ant Design package and add it to your node_modules/ directory. You can then import and use Ant Design components in your React application as needed.