Opening & closing
As soon as our modal stack is set up, we can start using it from wherever we want in the code. Since Modal v2, we have 3 different ways to do so, depending on the situation:
1. If we're inside a regular component
2. If we're inside a modal component specifically
3. Or if we're just in plain vanilla JavaScript, outside React
If you want to execute some code right after calling an initial openModal()
/
closeModal()
(ie: opening/closing another modal? making API calls? etc) or any other Modalfy methds, you can use Modalfy's callback API to that effect. Please refer to our Triggering a callback guide.
1. From a regular component
This use case could be the most frequent: we're in a regular component, could be a screen in our app for instance and we want to open a modal from there. To do so, we'll use the useModal()
Hooks (or withModal()
HOC if we're dealing with a Class component) to access the modal
prop we saw in the previous section.
From there, amongst other things, we'll cover later (if you can't wait, check out ModalProp
API reference), we'll have access to the openModal()
function:
Have a look at ModalProp
API reference to have a complete overview of what does modal
brings with it. The most important thing to notice is that regular components (ModalProp
) and modal components (ModalComponentProp
) do not have access to the same things inside modal
.
2. From a modal component
Each component we put inside the modalConfig
object we passed to createModalStack()
will receive the modal
prop. That's why we access it directly from the props, without the need of the Hooks/HOC:
You'll notice that to open a modal, Modalfy uses the keys we put inside modalConfig
. So if the config looks like this:
We can call openModal('NoConnection')
, openModal('MessageSentModal')
, etc.
3. From vanilla JavaScript
Since Modalfy v2, we can interact with the modal stack from outside React. Possible use cases for this could be opening/closing modals from API calls or when there is a specific change in the global state, etc.
If you want to learn more about this, head over to the Using outside of React guide.
Last updated