useModal
useModal
hook allows you to manage a modal. Since it is designed as headless, it returns the show
and close
functions and the visible
state. It expects you to handle the UI.
const { show, close, visible } = useModal();
You can use the visible
state to show or hide the modal. The show
and close
functions' only use is changing the visible
state. You can use this hook anywhere.
Basic Usage
Let's see an example:
import {
useModal,
} from "@refinedev/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 its onClick
callback to trigger the opening of the <YourModalComponent>
. When the user clicks on the button, the <YourModalComponent>
appears.
To demonstrate the close
function, we created a <button>
that uses it in its onClick
property to close <YourModalComponent>
Properties
defaultVisible
Default:
false
defaultVisible
is a boolean value that determines whether the modal is visible by default.
useModal({
defaultVisible: true,
});
Return Values
visible
Visible state of the modal.
show
A function that can change the visible
state to true
.
close
A function that can change the visible
state to false
.
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 | A function that can close the modal. | () => void |
Example
npm create refine-app@latest -- --example core-use-modal