layers-in-react

throwItOnALayer.js

/* 
  Instagram is 100% React. They pop modals. I didn't know how you could 
  do that in React, so I guessed based on what was going on the in 
  Chrome inspector. The following code assumes a commonJS module system.
  Classes that I pass into this use the this.props.teardown to take themselves 
  down.
*/ 

var _     = require('lodash'),
    React = require('react');

var count = 0; 

function gimmeATeardownFn() {
  React.unmountComponentAtNode(this);
  this.parentNode.removeChild(this);
}

function throwItOnALayer(componentClass, properties) {
  var layer      = document.createElement('div'),
      teardownfn = gimmeATeardownFn.bind(layer);
  
  // using lodash, assign works just like 'extend' does in underscore.
  
  React.renderComponent(
    componentClass(_.assign({ teardown : teardownfn }, properties)), layer
  );
  
  document.body.appendChild(layer);
}

module.exports = throwItOnALayer;