A Modal made with React and React Motion

Modal.js

import React, { Component, PropTypes } from 'react';
import { TransitionMotion, spring } from 'react-motion';

class Modal extends Component {
  defaultStyles() {
    return {
      key: 'modal',
      data: {},
      style: {
        opacity: spring(1), position: spring(0)
      }
    };
  }

  willEnter() {
    return { opacity: 0, position: -1000 };
  }

  willLeave() {
    return { opacity: spring(0), position: spring(-1000) };
  }

  renderModal(key, style) {
    const { isOpen, onClose, width, zIndex, children } = this.props;

    return (
      <div style={{ zIndex, opacity: style.opacity }} key={key}>
        <div className={cx({modal__overlay: isOpen})} onClick={onClose}></div>
        <div style={{
          width,
          zIndex,
          transform: `translate3d(0, ${style.position}px, 0)`,
        }}>
          {children}
          <span onClick={onClose}>×</span>
        </div>
      </div>
    );
  }

  render() {
    const { isOpen } = this.props;

    return (
      <TransitionMotion
        styles={isOpen ? [this.defaultStyles()] : []}
        willEnter={this.willEnter}
        willLeave={this.willLeave}>
        {(items) => {
          return items.length ? this.renderModal(items[0].key, items[0].style) : null;
        }}
     </TransitionMotion>
   );
  }
}

Modal.propTypes = {
  width: PropTypes.number || PropTypes.string,
  isOpen: PropTypes.bool,
  onClose: PropTypes.func,
  zIndex: PropTypes.number
};

Modal.defaultProps = {
  width: '400px',
  zIndex: 999
};

export default Modal;