Package Exports

react-addons-render-to-portal-mixin

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-addons-render-to-portal-mixin) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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);