Skip to content
Home

Modal

Info
Demos
Properties
Events

Events

EventsDescription
onOpen / on_open(optional) This event gets triggered once the modal shows up. Returns the modal id: \{ id \}.`.
onClose / on_close(optional) this event gets triggered once the modal gets closed. Returns the modal id: \{ id, event, triggeredBy \}.
onClosePrevent / on_close_prevent(optional) this event gets triggered once the user tries to close the modal, but prevent_close 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 \}

Selective on_close_prevent

<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>