Skip to main content
🧙‍♂️ refine grants your wishes! Please give us a ⭐️ on GitHub to keep the magic going.
Version: 4.xx.xx

useModal

The useModal hook helps you manage the Ant Desing Modal component.

const { show, close, modalProps } = useModal();

You can use the show and close props to control the modal visibility. You have to descturt modalProps to the <Modal/> component.

Usage

Let's see an example:

src/pages/posts/list.tsx
import { useModal } from "@refinedev/antd";
import { Modal, Button } from "antd";

export const PostList: React.FC = () => {
const { show, modalProps } = useModal();

return (
<>
<Button onClick={show}>Show Modal</Button>
<Modal {...modalProps}>
<p>Modal Content</p>
</Modal>
</>
);
};

Here, we show a button somewhere on the page and use show on it's onClick callback to trigger opening of the <Modal>. When the user clicks on the button, the <Modal> appears.

API Reference

Properties

Return Value

KeyDescriptionType
showReturns the visibility state of the Modal() => void
closeA function that can open the modal() => void
modalPropsSpecify a function that can close the modal() => void