Skip to content

Instantly share code, notes, and snippets.

@chehab
Last active January 19, 2019 21:11
Show Gist options
  • Save chehab/e8a7c1d85fbef181aa6bb66eee7a83ee to your computer and use it in GitHub Desktop.
Save chehab/e8a7c1d85fbef181aa6bb66eee7a83ee to your computer and use it in GitHub Desktop.
// MyDynamicComponent/index.js
import Loadable from 'react-loadable'

export const AsyncMyChildComponent_1 = Loadable({
  loader: () => import(/* webpackChunkName: "MyComponentNameForSourceMap" */ './Path/to/MyComponent'),
  loading: () => (<i className="icon-loading spinning">),
})

export const AsyncMyChildComponent_2 = Loadable({
  loader: () => import(/* webpackChunkName: "MyComponentNameForSourceMap" */ './Path/to/MyComponent'),
  loading: () => (<i className="icon-loading spinning">),
})

// more component
// myDynamicConmonent.js

import { get as _get } from 'lodash'

import {
  AsyncMyChildComponent_1,
  AsyncMyChildComponent_2,
  AsyncMyChildComponent_3,
} from './myDynamicComponent/index.js'
    
const dynComponent = {
  a: AsyncMyChildComponent_1,
  b: {
      y: AsyncMyChildComponent_2,
      z: AsyncMyChildComponent_3,
    }
  }

export default function MyDynComp(props) {
  const DynComp = _get(dynComponent, props.path, null)
  
  return (<DynComp />)
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment