Ant Design Modal

In Ant Design, the Modal component is used to create a modal or dialog box to display additional content or gather user input.

Syntax

import { Modal } from 'antd';

const showModal = () => {
  Modal.info({
    title: 'This is a Modal',
    content: 'Some content goes here...',
  });
};

Use

The Ant Design Modal component is used to display a modal window on a web page. It provides a way to display important information to the user, and requires user interaction before the user can continue interacting with the site.

Importance

Modals are common in web design and can be used for a variety of purposes, including displaying important messages to a user, collecting information from a user, or displaying a confirmation or warning message before a user performs an action.

The Ant Design Modal component is important because it provides a clean and easy-to-use interface for displaying modals on a web page. It is highly customizable, and has a variety of options for controlling the appearance of the modal and the behavior of the user interaction.

Example

import { Modal, Button } from 'antd';
import { useState } from 'react';

const App = () => {
  const [visible, setVisible] = useState(false);

  const showModal = () => {
    setVisible(true);
  };

  const handleOk = () => {
    setVisible(false);
  };

  const handleCancel = () => {
    setVisible(false);
  };

  return (
    <>
      <Button type="primary" onClick={showModal}>
        Open Modal
      </Button>
      <Modal
        title="Basic Modal"
        visible={visible}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <p>Some contents...</p>
        <p>Some contents...</p>
        <p>Some contents...</p>
      </Modal>
    </>
  );
};

Summary

The Ant Design Modal component provides a clean and easy-to-use interface for displaying modals on a web page. It is highly customizable, and has a variety of options for controlling the appearance of the modal and the behavior of the user interaction. Modals are common in web design and can be used for a variety of purposes, including displaying important messages to a user, collecting information from a user, or displaying a confirmation or warning message before a user performs an action.