var ctx = Morearty.createContext({

  initialState: {

    hello: 'hello dialog world',

    activeDialog: 0,

    foo: ''

  }

});

​

window.rootBinding = ctx.getBinding();

​

// note: need to safeguard for server-side render

// note: doesn't support changing portalId

var Portal = React.createClass({

  render: () => null,

  portalElement: null,

  componentDidMount() {

    var p = this.props.portalId && document.getElementById(this.props.portalId);

    if (!p) {

      var p = document.createElement('div');

      p.id = this.props.portalId;

      document.body.appendChild(p);

    }

    this.portalElement = p;

    this.componentDidUpdate();

  },

  componentWillUnmount() {

    document.body.removeChild(this.portalElement);

  },

  componentDidUpdate() {

    React.render(<div {...this.props}>{this.props.children}</div>, this.portalElement);

  }

});

​

var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;

var App = React.createClass({

  mixins: [Morearty.Mixin],

  showOne() { this.getDefaultBinding().set('activeDialog', 1) },

  showTwo() { this.getDefaultBinding().set('activeDialog', 2) },

  foo() { this.getDefaultBinding().set('foo', 'bar') },

  hide() {  this.getDefaultBinding().set('activeDialog', 0) },

  render(){

    var binding = this.getDefaultBinding();

    var activeDialog = binding.get('activeDialog');

    var foo = binding.get('foo');

    return (

      <div>

         <div className="Main">

           <h1>Portalicious</h1>

           <p>{binding.get('hello')}</p>

           <button onClick={this.showOne}>show one</button>

           <button onClick={this.showTwo}>show two</button>

           <button onClick={this.hide}>hide</button>

           { /* Note: it's also possible to use just 1 portal for both dialogs */ }

           <Portal className="DialogGroup">

           <ReactCSSTransitionGroup transitionName="Dialog-anim">

            { activeDialog === 1 && 

              <div key="0" className="Dialog"><button onClick={this.hide}>X</button>

               <button onClick={this.foo}>foo</button>

              ONE ONE <strong>{foo}</strong> ONE ONE!!!</div> }

           </ReactCSSTransitionGroup>

           </Portal>  

           <Portal className="DialogGroup">

           <ReactCSSTransitionGroup transitionName="Dialog-anim">

            { activeDialog === 2 && 

              <div key="1" className="Dialog"><button onClick={this.hide}>X</button>

              TWO TWO <strong>TWO</strong> TWO TWO!!!</div> }

           </ReactCSSTransitionGroup>

           </Portal>

         </div>

      </div>

    );

  }

});

​

​

var Bootstrap = ctx.bootstrap(App);

React.render(<Bootstrap />, document.getElementById('app'));