Skip to content

Instantly share code, notes, and snippets.

@TyrealGray
Last active April 11, 2019 14:33
Show Gist options
  • Save TyrealGray/ba237cc66ff8f808077796419e60a3ca to your computer and use it in GitHub Desktop.
Save TyrealGray/ba237cc66ff8f808077796419e60a3ca to your computer and use it in GitHub Desktop.
Dynamic React Component library

//index.js

import Loadable from 'react-loadable';

export const funcClass = async function() {
    const {funcClass} = await import('./funcClass');
    return new funcClass();
};

function Loading() {
    return <h3>Loading...</h3>;
}

export const UI = Loadable({
    loader: () => import('./UI'),
    loading: Loading
});

//.babelrc

{
  "presets": ["@babel/preset-react"],
  "plugins": ["@babel/plugin-proposal-class-properties", "@babel/plugin-syntax-dynamic-import"]
}

//package.json

{
  "name": "lazylib",
  "version": "1.0.0",
  "description": "",
  "main": "lib/index.js",
  "dependencies": {
    "react": "^16.8.6",
    "react-loadable": "^5.5.0"
  },
  "devDependencies": {
    "@babel/cli": "^7.4.3",
    "@babel/core": "^7.4.3",
    "@babel/plugin-proposal-class-properties": "^7.4.0",
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
    "@babel/preset-env": "^7.4.3",
    "@babel/preset-react": "^7.0.0"
  },
  "scripts": {
    "build": "babel src -d lib",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment