Skip to content
Home

Modal

Info
Demos
Properties
Events

Events

PropertyTypeDescription
onOpen / on_openfunction(optional) This event gets triggered once the modal shows up. Returns the modal id: { id }.
onClose / on_closefunction(optional) This event gets triggered once the modal gets closed. Returns the modal id: { id, event, triggeredBy }.
onClosePrevent / on_close_preventfunction(optional) This event gets triggered once the user tries to close the modal, but preventClose is set to true. Returns a callback close you can call to trigger the close mechanism. More details below. Returns the modal id: { id, event, close: Method, triggeredBy }.

triggeredBy

The triggeredBy property is given when the onClose or the onClosePrevent event is triggered. It can contain one of the following values:

  • button: The close button that triggered the event.
  • handler: The close handler given by the function (as the content/children).
  • keyboard: The escape key that triggered the event.
  • overlay: The overlay element that triggered the event.
  • unmount: The unmount event that triggered the openState prop change.

Selective on_close_prevent

Code Editor
<Modal
  preventClose={true}
  onClosePrevent={({ triggeredBy, close /* id, event */ }) => {
    switch (triggeredBy) {
      case 'keyboard':
      case 'button':
        close()
        break
      case 'overlay': {
        const timeout = setTimeout(close, 1e3)
        return () => clearTimeout(timeout) // clear timeout on unmount
      }
    }
  }}
>
  ...
</Modal>