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