Pattern for dynamically loading React components based on a config json object.

ComponentIndex.js

import config from '../config'

let components = {}

//For each component in the config fiel into an object
for (var i = config.length - 1; i >= 0; i--) {
	components[config[i].name] = require(config[i].path).default
}

export default components

/* Alternative if this require business makes you too queasy */
// import First from './First'
// import Second from './Second'
// import Third from './Third'

// export const First = First
// export const Second = Second
// export const Third = Third

config.js

export default [
{
	name:'First',
	path:'./First'
},
{
	name:'Second',
	path:'./Second'
},
{
	name:'Third',
	path:'./Third'
}]

First.js

import React from 'react';

//Example components, keeping these super simple
class First extends React.Component {
	render() {
		return <h1>First</h1>
	}
}

export default First

Main.js

import React from 'react';
import Components from './ComponentIndex'
import config from '../config'

class AppComponent extends React.Component {
  render() {
    return (
      <div className="index">
      <h2>Component structure test</h2>
      	{config.map((comp) => {
      		/*Load each component in the config file in order.
      		* Note that the config object could also include props
      		* which could be passed in like so:
      		* <Component {..config.props} />
      		*/
      		if (Components.hasOwnProperty(comp.name)) {
      			let Component = Components[comp.name];
	      		return <Component key={comp.name} />
      		}
      	})}
      </div>
    );
  }
}

export default AppComponent;

Second.js

import React from 'react';

class Second extends React.Component {
	render() {
		return <h1>Second</h1>
	}
}

export default Second

Third.js

import React from 'react';

class Third extends React.Component {
	render() {
		return <h1>Third</h1>
	}
}

export default Third

Just to be clear, lets not get confused between two different things. The snippet is to dynamically load the React Component and not the javascript files. The files are expected to be already loaded.

You can refer maybe this to get the files loaded dynamically going (not tried).

What worked for me was the piece of code below. It uses async module import. Please note that dynamic import() still has some caveats like not accepting expressions as parameters. Only pure strings or template literals.

Using the example from the gist at the top:

import config from '../config'

let components = {}

function registerComponent(entry) {
    import(`some/root/path/${entry.id}`) // just entry.path won't work :(
        .then(component => components[entry.name] = component.default)
        .catch(error => console.log(error))
}

function addComponents(configArr) {
    configArr.forEach(async entry => {
        await registerComponent(entry)
    })
}

addComponents(config)

export default components

Hi, how to use this for React native

I receiving some error like Invalid call at line 17: import("." + entry.path) // just entry.path won't work

What worked for me was the piece of code below. It uses async module import. Please note that dynamic import() still has some caveats like not accepting expressions as parameters. Only pure strings or template literals.

Using the example from the gist at the top:

import config from '../config'

let components = {}

function registerComponent(entry) {
    import(`some/root/path/${entry.id}`) // just entry.path won't work :(
        .then(component => components[entry.name] = component.default)
        .catch(error => console.log(error))
}

function addComponents(configArr) {
    configArr.forEach(async entry => {
        await registerComponent(entry)
    })
}

addComponents(config)

export default components
```Invalid call at line 17: import("." + entry.path) // just entry.path won't work

This worked for me:
https://gist.github.com/YannisMarios/7f3b947b46b4f79c06c79c2ff597eff0

import React, { lazy, Suspense } from 'react'
import Spinner from '../../ui/spinner/Spinner' // Some Spinner

const config = [
  {
    name: 'First',
    path: './First',
    props: {name: 'Yannis', surname: 'Marios'}
  },
  {
    name: 'Second',
    path: './Second',
    props: {name: 'John', surname: 'Doe'}
  }
]

const importedComponents = () => {
  const components = {}
  for(let i = 0; i < config.length; i++) {
    components[config[i].name] = lazy(() => import(`${config[i].path}`))
  }
  return components
}

const DynamicComponents = () => {
  const Components = importedComponents()

  const components = config.map(c => {
    const Component = Components[c.name]
    return <Suspense key={c.name} fallback={<Spinner/>}><Component key={c.name} {...c.props} /></Suspense>
  })
  return <div>{components}</div>
}

export default DynamicComponents

Hello there,
Thank you for sharing. does it work for share props to child First.js with componentWillReceiveProps ?

Thank you