conscious-sapphire•2y 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•2y 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•2y ago

<@539513465103056900> kapa.ai is still learning and improving, please let us how it did by reacting below

generous-apricot•2y ago

good bot 🚀 but import should be

import {
    useModal,
} from "@refinedev/core";

import {
    useModal,
} from "@refinedev/core";

conscious-sapphire•2y ago

yes @alicanerdurmaz 🙂 but... according to docs only returned parameters are: show, close, visible ... I suppose the "isOpen" of the reply is visible instead 😅

generous-apricot•2y ago

yes 😄 bot still learning

conscious-sapphire•2y ago

but still an amazing use of AI ❤️