Skip to main content
Version: 3.xx.xx

useModal

useModal hook allows you to manage a modal. Since it is designed as headless, it only outputs show and close functions and visible for state. It expects you to handle the UI.

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

You can use visible state to show or hide the modal. The show and close functions allow to change the visible state. 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 {
useModal,
} from "@pankod/refine-core";

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

return (
<>
<button onClick={show}>Show Modal</button>
{visible &&
<YourModalComponent>
<p>Dummy Modal Content</p>
<button onClick={close}>Close Modal</button>
</YourModalComponent>
}
</>
);
};

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

We also created a <button> to close the <YourModalComponent> and gave the onClick function close, the modal dialog will be closed. We do this to demonstrate close function.

API Reference​

Properties​

PropertyDescriptionTypeDefault
defaultVisibleModal's default visible statebooleanfalse

Return Value​

KeyDescriptionType
visibleReturns the visible state of the Modalboolean
showA function that can open the modal() => void
closeSpecify a function that can close the modal() => void

Live StackBlitz Example​