React Modal dialog component (using animate.css).

Modal.js

import React from "react";
import classNames from "classnames";

export default class Modal extends React.Component {
  static propTypes = {
    onClose: React.PropTypes.func.isRequired,
    isActive: React.PropTypes.bool.isRequired
  }

  constructor(props) {
    super(props);
    this.state = {isActive: false, willClose: false};
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.isActive) {
      this.setState({isActive: true, willClose: false})
    } else {
      const self = this;
      this.setState({willClose: true});
      setTimeout(() => {
        self.setState({isActive: false});
      }, 500); // To animate closing the modal.
    }
  }

  onClose() {
    this.props.onClose();
  }

  render() {
    const modalClasses = classNames({
      "animated": true,
      "slideInDown": this.state.isActive,
      "slideOutUp": this.state.willClose
    });

    if (this.state.isActive) {
      return (
        <div>
          <div
            style={{
              display: "block",
              zIndex: "8887",
              position: "absolute",
              top: "0",
              bottom: "0",
              left: "0",
              right: "0",
              background: "gray",
              opacity: "0.7"
            }}
            onClick={::this.onClose}
          >
          </div>
          <div
            className={modalClasses}
            style={{
              display: "block",
              zIndex: "8888",
              height: "200px",
              width: "300px",
              position: "absolute",
              top: "0",
              bottom: "0",
              left: "0",
              right: "0",
              margin: "auto",
              background: "white"
            }}
          >
            <h1>Modal!!</h1>
            <button className="btn" onClick={::this.onClose}>
              Close
            </button>
          </div>
        </div>
      );
    } else {
      return false;
    }
  }
}

TopPage.js

import React from "react";
import Modal from "Modal";

export default class TopPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isModalActive: false};
  }

  openModal() {
    this.setState({isModalActive: true});
  }

  closeModal() {
    this.setState({isModalActive: false});
  }

  render() {
    return (
      <div>
        <Modal isActive={this.state.isModalActive} onClose={::this.closeModal}/>
        <button className="btn" onClick={::this.openModal}>
          Open modal
        </button>
      </div>
    );
  }
}