React Modal

This is a lightweight stylish modal

meteor add patrickml:react-modal

How to use

####Theming

As of version 2.1 we have added theming in order to allow for everyone to make their own style with this lightweight modal system.

In order to declare your theme just add a prop to the <Modal /> component like so

<Modal
  isOpen={ instance.state.isOpen }
  close={ instance.closeModal }
  title={ instance.props.title }
  theme="flex-theme"
  options={{
    style : {
      maxWidth : '300px'
    }
  }}
  >

In order to create a theme simply start with these classes to your stylesheets

.flex-theme.md-modal {
  .md-content {
    .md-title {
    }
    .md-body {
      form {
        input[type="text"] {
        }
      }
      button {

      }
      .md-footer {
        .button {

        }
      }
    }
  }
}

Enclosed Modal

An enclosed modal is one where the state is enclosed in the same component as the rendering of the modal. For this you can use the ReactModalMixin provided with this package. A component with the ReactModalMixin will inherit the state openModal and the functions openModal and closeModal which set the state accordingly

EnclosedModal = React.createClass({
  mixins : [ReactModalMixin],
  render () {
      return (
        <div>
          <button onClick={ this.openModal }>Open Enclosed Modal</button>
          <Modal
            isOpen={ this.state.isOpen }
            close={ this.closeModal }
            title="Demo Enclosed Modal">
            <p>This modal and all of its functionality are enclosed in the 'EnclosedModal' loading the 'ReactModalMixin' which controls the open and closed state.</p>
            <button onClick={ this.closeModal }>Click Here to Close</button>
          </Modal>
        </div>
      );
  }
});

Controlled Modal

A Controlled Modal is one that is controlled by a parent component and the properties are passed to the Modal via properties.

Controlled Modal JSX

ControlledModal = React.createClass({
  render () {
    return (
      <div>
        <Modal
          isOpen={ this.props.isOpen }
          close={ this.props.closeModal }
          title="Demo Controlled Modal">
          <p>This modal is controlled by the parent component. It can be opened and closed by padding props to the component</p>
          <button onClick={ this.props.closeModal }>Click Here to Close</button>
        </Modal>
      </div>
    );
  }
});

Parent Component for Controlled Modal

ModalPage = React.createClass({
  getInitialState () {
    return {
      controlledModalOpen : false
    };
  },
  openModal () {
    this.setState({
      controlledModalOpen : true
    });
  },
  closeModal () {
    this.setState({
      controlledModalOpen : false
    });
  },
  render () {
    return (
      <div>
        <ControlledModal closeModal={ this.closeModal } isOpen={ this.state.controlledModalOpen } />
        <button onClick={ this.openModal }>Open Controlled Modal</button>
      </div>
    );
  }
});

Demo http://react-modal.meteor.com/