PowrReactModal

PowrReactModal handles the rendering of a button, a modal and all onclick events needed to open and close the modal.

Button and modal styles can be controlled through props. The contents of the modal is passed as a child component to PowrReactModal (see example).

This simplifies and standardizes usage of ReactModal within powr while still providing us with flexibility.

Why bother with this structure?

ReactModal is used in a number of places, we need to standardize its usage by creating templates with it rather than importing and using it directly throughout our code. This will help reduce code and prevent bugs such as inconsistently styled modals and broken events.

Example

For example usage see powr > app > javascript > modules > react_components > meta_nav

Here MetaNav imports PowrReactModal and ShareComponent.

The full component structure looks like this:

<EditTopBar>
  <MetaNav>
    <PowrReactModal>
      <ReactModal>
        <ShareComponent />
      </ReactModal>
    </PowrReactModal>
  </MetaNav>
</EditTopBar>

Caveats

Currently this component is intended to be used with a button which handles the opening of the modal. If desired we will need to revisit this functionality to expand it for use without a button. The main goal was to get a working example of how to use ReactModal in a standardized way and in my specific use case I needed a button -- it should be fairly trivial to refactor this for usage without a button.