deep-jade
deep-jadeβ€’14mo ago

Multiple modals

Hi all, I'm using headless useModal (https://refine.dev/docs/api-reference/core/hooks/ui/useModal/) with a custom modal component and all is working correctly. But, how to put more than one modal window on the same page? e.g. on a button click I want to open Modal1 and on another button click Modal2 thanks!
useModal | refine
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.
6 Replies
kapa.ai
kapa.aiβ€’14mo ago
Hi @.simoneb. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Hi, You can achieve this by using multiple instances of the useModal hook for each modal you want to display on the same page. Here's an example based on the information extracts:
import { useModal } from "@pankod/refine";

const MyComponent = () => {
const { show: showModal1, close: closeModal1, isOpen: isOpenModal1 } = useModal();
const { show: showModal2, close: closeModal2, isOpen: isOpenModal2 } = useModal();

return (
<>
<button onClick={showModal1}>Open Modal 1</button>
<button onClick={showModal2}>Open Modal 2</button>

{isOpenModal1 && (
<YourCustomModalComponent onClose={closeModal1}>
{/* Modal 1 content */}
</YourCustomModalComponent>
)}

{isOpenModal2 && (
<YourCustomModalComponent onClose={closeModal2}>
{/* Modal 2 content */}
</YourCustomModalComponent>
)}
</>
);
};
import { useModal } from "@pankod/refine";

const MyComponent = () => {
const { show: showModal1, close: closeModal1, isOpen: isOpenModal1 } = useModal();
const { show: showModal2, close: closeModal2, isOpen: isOpenModal2 } = useModal();

return (
<>
<button onClick={showModal1}>Open Modal 1</button>
<button onClick={showModal2}>Open Modal 2</button>

{isOpenModal1 && (
<YourCustomModalComponent onClose={closeModal1}>
{/* Modal 1 content */}
</YourCustomModalComponent>
)}

{isOpenModal2 && (
<YourCustomModalComponent onClose={closeModal2}>
{/* Modal 2 content */}
</YourCustomModalComponent>
)}
</>
);
};
In this example, we create two instances of the useModal hook, one for each modal. We then use the show and close methods to control the visibility of each modal. The isOpen property is used to conditionally render the custom modal components. For more information on the useModal hook, you can refer to the refine useModal hook documentation (https://refine.dev/docs/api-reference/core/hooks/ui/useModal/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.aiβ€’14mo ago
<@539513465103056900> kapa.ai is still learning and improving, please let us how it did by reacting below
absent-sapphire
absent-sapphireβ€’14mo ago
good bot πŸš€ but import should be
import {
useModal,
} from "@refinedev/core";
import {
useModal,
} from "@refinedev/core";
deep-jade
deep-jadeβ€’14mo ago
yes @alicanerdurmaz πŸ™‚ but... according to docs only returned parameters are: show, close, visible ... I suppose the "isOpen" of the reply is visible instead πŸ˜…
absent-sapphire
absent-sapphireβ€’14mo ago
yes πŸ˜„ bot still learning
deep-jade
deep-jadeβ€’14mo ago
but still an amazing use of AI ❀️