react-addons-render-to-portal-mixin v0.1.1

react-addons-render-to-portal-mixin

A React component Mixin that allows you to render elements to a "portal" DOM node.

Install

npm install react-addons-render-to-portal-mixin --save

Usage

Below is a very simple example:

CommonJS:

var App = React.createClass({

  // what's nice about using ReactPortalMixin is that it will preserve
  // your components context using ReactDOM.unstable_renderSubtreeIntoContainer
  //
  // so this component's _renderModal method which returns a <Modal> element
  // to be mounted at the portal will receive this.context as if you were
  // going to mount the element within this component.
  contextTypes: {
    history: React.PropTypes.object.isRequired
  },

  mixins: [ReactPortalMixin],

  reactPortalWillMount: function(portalNode) {
    portalNode.id = 'MyModal';
    portalNode.className = 'modal';
  },

  componentDidMount: function() {
    this.renderToPortal(
      this._renderModal(this.props)
    );
  },

  componentWillReceiveProps: function(nextProps) {
    this.renderToPortal(
      this._renderModal(this.props)
    );
  },
  
  // "componentWillUnmount" from the mixin will take care of cleanup

  render: function() {
    return React.DOM.noscript();
  },

  // Renders a <Modal> component with the current props.
  _renderModal: function(props) {
    return <Modal {...props />;
  },

  hide: function() {
    if (this.reactPortalRef) this.reactPortalRef.hide();
  }

};

ReactDOM.render(<App />, document.body);