A React component Mixin that allows you to render elements to a "portal" DOM node.
npm install react-addons-render-to-portal-mixinA React component Mixin that allows you to render elements to a "portal" DOM node.
``bash`
npm install react-addons-render-to-portal-mixin --save
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
// 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
_renderModal: function(props) {
return
},
hide: function() {
if (this.reactPortalRef) this.reactPortalRef.hide();
}
};
ReactDOM.render(
``