Skip to main content
Version: 2.xx.xx

useModal

useModal hook allows you to manage a modal. It returns the props to manage Ant Design's Modal components.

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

You can pass the returned modalProps as props to Modal component and use show and close methods to hide and show it. It does not provide any functionality besides this. You can use this hook anywhere.

Usage​

Let's see an example:

src/pages/posts/list.tsx
import {
List,
Table,
useTable,
useModal,
Modal,
Button,
} from "@pankod/refine";

export const PostList: React.FC = () => {
const { tableProps } = useTable<IPost>();

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

return (
<>
<List
pageHeaderProps={{
extra: <Button onClick={show}>Show Dummy Modal</Button>,
}}
>
<Table {...tableProps} rowKey="id">
<Table.Column dataIndex="id" title="ID" />
<Table.Column dataIndex="title" title="Title" />
<Table.Column dataIndex="content" title="Content" />
</Table>
</List>
<Modal onOk={close} {...modalProps}>
Dummy Modal Content
</Modal>
</>
);
};

interface IPost {
id: string;
title: string;
content: string;
}

use modal usage

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

We also used onOk callback from Ant Design Modal to add close as a callback on it's button. When the user clicks on this button, thus triggering close function, the modal dialog will be closed. We do this to demonstrate close function.

API Reference​

Return Value​

KeyDescriptionType
modalPropsProps for managed modalModalProps
showA function that can open the modal() => void
closeSpecify a function that can close the modal() => void

Live Codesandbox Example​