Dynamo React

Dynamically load and inject React Components into DOM

import React from 'react'
import ReactDOM from 'react-dom'
import Dynamo from 'dynamo-react'
 
const loader = (name) =>
  () => new Promise((res) =>
      res(require('./dynamic/' + name + '.js')))
 
class App extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      active: null,
      dynamos: [
        loader('One'),
        loader('Two'),
        loader('Three')
      ]
    }
  }
 
  setActive (i) {
    this.setState({ active: i })
  }
 
  render () {
    const { active, dynamos } = this.state
    return (
      <div>
        {
          dynamos.map((d, i) =>
            <button
              key={i}
              onClick={() => this.setActive(i)}>
              {i + 1}
            </button>)
        }
        {
          dynamos.map((d, i) =>
            <Dynamo
              key={i}
              active={active === i}
              childProps={{ name: i + 1 }}
              load={d} />)
        }
      </div>
    )
  }
}
 
ReactDOM.render(
  <App />,
  document.getElementById('root')
)