Search code examples
reactjsmodal-dialogmaterialize

Closing the modal programmatically (react-materialize)


I can't figure out how to programmatically close a modal (for example, the login modal after the user has been logged in).

It looks something like this:

<Modal
  actions={[
    <Button flat modal="close" node="button" waves="green">
      Close
    </Button>
  ]}
  bottomSheet={false}
  fixedFooter={false}
  header="Log in"
  id="modal-login"
  options={{
    dismissible: true,
    endingTop: "10%",
    inDuration: 250,
    onCloseEnd: null,
    onCloseStart: null,
    onOpenEnd: null,
    onOpenStart: null,
    opacity: 0.5,
    outDuration: 250,
    preventScrolling: true,
    startingTop: "4%"
  }}
>
  <form onSubmit={e => /* log in user */}>
    <input type="email"/>
    <input type="password"/>
    <button>Log in</button>
  </form>
</Modal>

Solution

  • Use the open prop to programmatically open or close the modal

    <Modal
      open={isModalOpen}
      ...
    />
    

    Ref: https://react-materialize.github.io/react-materialize/?path=/story/javascript-modal--default