Components
Overlay
Modal

Modal

Modal are surfaces that display content and actions on a single topic.

Import statement

import { Modal, ModalWrapper } from "@wfp/react"

Full-screen Dialog (Dialog example)

Full-screen dialogs only show the Modal element without any other content like the navigation. They can be used for login, password reset or very important dialogs.

<Modal open hideClose backgroundImage={yourBackgroundImage.jpg} />

Handling the open state

Modal allows you to control the open State on your own. Use the Modal Wrapper component to use a controlled version of Modal.

Expand code

Editable Example

() => {
  const [open, setOpen] = useState();

  submitAndClose = () => {
    alert("Submit now and close the modal");
    setOpen(false);
  };

  toggleModal = () => {
    setOpen(!open);
  };

  return (
    <div>
      <Button onClick={() => setOpen(!open)}>
        Open Modal
      </Button>
      <Modal
        open={open}
        primaryButtonText="Submit"
        onRequestSubmit={this.submitAndClose}
        secondaryButtonText="Cancel Modal"
        onSecondarySubmit={this.toggleModal}
        onRequestClose={this.toggleModal}
        modalHeading="Title"
      >
        Nothing to see here
      </Modal>
    </div>
  );
};

Passive Modal

Expand code

Editable Example

() => {
  const [open, setOpen] = useState();

  toggleModal = () => {
    setOpen(!open);
  };

  return (
    <div>
      <Button onClick={() => setOpen(!open)}>
        Open Modal
      </Button>
      <Modal
        open={open}
        primaryButtonText="Submit"
        secondaryButtonText="Cancel Modal"
        onSecondarySubmit={this.toggleModal}
        modalHeading="Title"
        modalLabel="Modal label"
        passiveModal={true}
      >
        <p>Passive modal text</p>
      </Modal>
    </div>
  );
};

Modal with secondary button

Expand code

Editable Example

() => {
  const [open, setOpen] = useState();

  submitAndClose = () => {
    alert("Submit now and close the modal");
    setOpen(false);
  };

  toggleModal = () => {
    setOpen(!open);
  };

  return (
    <div>
      <Button onClick={() => setOpen(!open)}>
        Open Modal
      </Button>
      <Modal
        open={open}
        primaryButtonText="Submit"
        onRequestSubmit={this.submitAndClose}
        secondaryButtonText="Cancel Modal"
        onSecondarySubmit={this.toggleModal}
        onRequestClose={this.toggleModal}
        modalHeading="Title"
        modalLabel="Modal label"
      >
        <p>Passive modal text</p>
      </Modal>
    </div>
  );
};

ModalWrapper

The ModalWrapper component is a wrapper around the Modal component. It provides a button to open the Modal and handles the open state for you.

Basic Usage

Expand code

Editable Example

() => {
  const [open, setOpen] = useState();

  return (
    <ModalWrapper
      modalHeading="Title"
      buttonTriggerText="Open Modal"
      primaryButtonText="Close Modal"
    >
      Nothing to see here
    </ModalWrapper>
  );
};

Disable closing the Modal if the user clicks on the background

To disable closing the Modal if the user clicks on the background, you can use the onRequestClose prop to handle the event and decide if the Modal should be closed or not.

onRequestClose={(evt, trigger) => {
  if (trigger !== 'background') {
    return props.onClose(evt, trigger);
  }
  return null;
}}


<Modal
  onRequestClose={onRequestClose}
  {...otherProps}
/>
Component overrides

To display custom footer content, pass a function (or React component) to modalFooter prop

You can use all the props of the Modal component and the following additional props:

  • prefix: The prefix used in the global class names.
  • onSecondaryButtonClick: The function to call when the secondary button is clicked
  • primaryButtonRef: The ref to the primary button
  • secondaryButtonRef: The ref to the secondary button
() => {
  const ModalFooter = () => (
    <a onSecondaryButtonClick={() => console.log("secondary button clicked")}>
      Custom Footer
    </a>
  );


  return <Modal open components={{ ModalFooter }} />;
};

On this page

References