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
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:
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:
----------------------<@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
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 ❤️