Skip to main content
Version: 2.xx.xx


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.


Let's see an example:

import {
} from "@pankod/refine";

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

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

return (
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" />
<Modal onOk={close} {...modalProps}>
Dummy Modal Content

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

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

Live Codesandbox Example