html-react-portal/lib/index.js

Neat way to lazy load and portalize react components into the DOM.

var React = require('react');
var ReactDOM = require( 'react-dom');

var  HTMLReactPortal = React.createClass({
  render: function(elements) {
    return (
      <React.Fragment>
        {
          Object.keys(props.elements).map( key => {
            const vanilla = props.elements[key]
            const {component, ...rest} = vanilla.attributes.hasOwnProperty('data')? JSON.parse(vanilla.attributes.data.value): {}
            return component
              ? <TargetComponent key={key} vanilla={vanilla} component={React.lazy(() => import(`srcPATH/${component}`))} {...rest}/>
              : <HTMLReactPortal key={key} elements={vanilla.children}/>
          })
        }
      </React.Fragment>
    )
  }
});

var TargetComponent = React.createClass({
  render: function({vanilla: vanilla, component: Component, ...rest}) {
    return ReactDOM.createPortal(<React.Suspense fallback={<React.Fragment/>}> <Component {...rest} vanilla={vanilla}>{vanilla.innerHTML}</Component> </React.Suspense>, vanilla.parentElement)
  }
});


module.exports.default = HTMLReactPortal;