Skip to main content

Modal-Client Communication

All views invoked with the show method create an internal channel for exchanging information in both directions.

Default Configuration

ShowMethod​

By default, the showMethod returns a promise that resolves as soon as the view returns its first message. This behavior can be overridden so that the promise resolves instantly after showing the modal, using the wait property.

CloseModal​

By default, the first argument of closeModal will be the response that the modal will return, and this response will be sent instantly. You can override this behavior so that the message is sent once the modal finishes closing correctly, i.e., after the animations are complete, using the waitAnimation property.


You can set these properties in the following ways:

// Specific configuration at a specific moment
showMethod(...modalProps, { wait: false, waitAnimation: false })
// General configuration
generateModal({Modals: {/*...MyModals*/}, wait: false, waitAnimation: false})
tip

They are ordered according to their priority, meaning one method can override the other

Listen for messages

The showMethod returns a waitFor function, which is also found within the modal's props. When invoked, it returns a promise that will wait until the modal returns a message. This promise can be aborted for two reasons: you can configure a timeout, or call the abort method of the promise itself. You can use this waitFor to wait for responses from the modal, or in the modal itself to have the client send you data.

const { waitFor } = await showMethod()

// Wait for a message
const response = await waitFor()

// Wait for a message for a maximum of 1 second
waitFor({timeout: 1000 })

// Abort with the abort method
const waitForPromise = waitFor()
waitForPromise.abort()
info

An infinite number of messages can be received.

Send messages

Like the waitFor function, the modal props and the showMethod response have a sendMessage function, which can be used to send messages in both directions, Modal -> Client or Client -> Modal.

// Client
const { sendMessage } = await showMethod()
sendMessage(myMessage)

// Modal
sendMessage(myMessage)