React best practice to create modal window

Question

How to create a modal window using React? By modal window I mean a frame which overlays with the content of a page. I want it to open up using a button on the webpage, be able to close it by clicking outside area and it will contain a form which user will fill and submit.

Does React have some production ready library for this task, or should I implement it using css? Also in the case of container/representational component pattern, should I nest the modal component inside the container component of modal opening component or inside the modal opening component itself?

Solution 1

1 - If you want to write a generic modal component in React, the only thing that your react modal component should do is to give a consistent view such as containing an overlay, setting positioning values and all common behaviour etc. The interaction decisions depends on how you proceed along the application. For example, in this kind of approach I mention as (1), fits better with using Flux. Basically you have a store, and collect all component state related data in it, and the ui states are managed by props passed to your component instead of calling setState in order to change the state of your component. In addition, this gives you the ability to change the component's state outside of the component. Let me clear myself with an example:

import "./modal.scss";

class Modal extends React.Component {
  constructor(props) {
    super(props);
  }

  shouldComponentUpdate(nextProps) {
    return !I.is(this.props.data, nextProps.data);
  }

  render() {
    let isOpen = this.props.data.get("isOpen");
    return (
      <div className={`flex middle center modal ${isOpen ? "open" : ""}`}>
      {isOpen ?
        (<div className={`row modal-content ${this.props.size || ""}`}>
          <div className="col-12 middle modal-title">{this.props.title}</div>
          <div className="col-12 modal-body">
            {this.props.body}
          </div>
          <div className="col-12 middle modal-footer">{this.props.footer}</div>
        </div>) : null
      }
      </div>);
  }
}

export default Modal;

And a style file like :

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  padding: 2rem;
  background-color: rgba(0, 0, 0, 0.55);

  .modal-content {
    background-color: white;
    max-height: 80%;
    height: 80%;

    .modal-title {
      padding: 0 2.25rem;
      height: 5rem;
      max-height: 5rem;
      text-transform: uppercase;
      font-size: 1.8rem;
    }

    .modal-body {
      height: calc(100% - 16rem);
      overflow-y: scroll;
      padding: 0 2rem;
    }

    .modal-footer {
      height: 5rem;
      max-height: 5rem;
      padding: 0 2.25rem;
    }
  }
}

And you can use it as :

<Modal isOpen={/* depends on your parameter */} 
       title="Hello Title" 
       body="Hello Body"
       footer="Hello Footer"
/>

This modal design only gives the proper view and basic controls of a modal, and configuration is all up to your usages. If your application logic pretty much similar in other usages of modals, then you can add them into the modal component yourself.

Solution 2

React Modal is a great library for this.