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
Key | Description | Type |
---|---|---|
show | Returns the visibility state of the Modal | () => void |
close | A function that can open the modal | () => void |
modalProps | Specify a function that can close the modal | () => void |