JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 1202
  • Score
    100M100P100Q105973F
  • License MIT

Dynamically load and render any react module(Component or an HOC) using dynamic import 🎉

Package Exports

  • react-dynamic-import

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-dynamic-import) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-dynamic-import

Dynamically load and render any react module(Component or an HOC) using dynamic import 🎉

Tiny(around 1.4kb gzipped) dynamic module loader and renderer.

Works with any bundler which supports dynamic import(eg: webpack, parcel etc) ✨

MIT Licence Open Source Love Build Status npm version GitHub version

Table of Contents

Install

NPM

npm install react-dynamic-import

Yarn

yarn add react-dynamic-import

UMD build

<script src="https://unpkg.com/react-dynamic-import/dist/react-dynamic-import.umd.js"></script>

Basic usage

  • Import library
    import ReactDynamicImport from 'react-dynamic-import';
    // or const ReactDynamicImport = require('react-dynamic-import');
  • Define dynamic import loader function
     const loader = f => import(`./dynamic/${f}.js`);
  • Use dynamic module
    // Make sure to use it outside render method, else new component is rendered in each render
    const RealComponent = ReactDynamicImport({ name: 'realModuleName', loader }),
  • Render component
    class Container extends React.component {
        render() {
            return <RealComponent />
        }
    }
    Checkout API for advanced usage.

API

Contribute

Thanks for taking time to contribute, please read docs and checkout src to understand how things work.

Reporting Issues

Found a problem? Want a new feature? First of all see if your issue or idea has already been reported. If don't, just open a new clear and descriptive issue.

Submitting pull requests

Pull requests are the greatest contributions, so be sure they are focused in scope, and do avoid unrelated commits.

  • Fork it!
  • Clone your fork: git clone https://github.com/<your-username>/react-dynamic-import
  • Navigate to the newly cloned directory: cd react-dynamic-import
  • Create a new branch for the new feature: git checkout -b my-new-feature
  • Install the tools necessary for development: yarn
  • Make your changes.
  • Commit your changes: git commit -am 'Add some feature'
  • Push to the branch: git push origin my-new-feature
  • Submit a pull request with full remarks documenting your changes

License

MIT License © Ganapati V S