Skip to main content
Refine AI
RefineDocumentation
Version: 4.xx.xx
Source Code

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.

Usage​

Let's see an example:

src/pages/posts/list.tsx
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​

defaultVisible is a boolean value that determines whether the modal is visible by default. By default, it is false.

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​

PropertyTypeDescriptionDefault
defaultVisible

boolean

Initial state of the modal

false

Return Value​

KeyDescriptionType
visibleReturns the visible state of the modal.boolean
showA function that can open the modal.() => void
closeA function that can close the modal.() => void

Example​

View Source Code
Run on your local
npm create refine-app@latest -- --example core-use-modal
Previous
Inferencer
Next
useMenu