A React Load component on demand.

English | 简体中文

🤔 Why use dynamic

It includes functions like split chunks, async chunks loader, loading state maintainance, so developers is free from those technical details and is able to focus their business.

Usually work with dynamic import syntax.

📦 Install

$ npm install --save react-loadable-dynamic
# or
$ yarn add react-loadable-dynamic

🔨 Usage

Create dynamic component

import dynamic from 'react-loadable-dynamic';

export default dynamic({
  loader: async function () {
    // webpackChunkName tells webpack create separate bundle for HugeA
    const { default: HugeA } = await import(/* webpackChunkName: "external_A" */ './HugeA');
    return HugeA;
  },
});

Use dynamic component

import React from 'react';
import AsyncHugeA from './AsyncHugeA';

// import as normal component
// with below benefits out of box:
// 1. download bundle automatically
// 2. give a loading splash while downloading (customizable)
// 3. display HugeA whenever component downloaded
export default () => {
  return <AsyncHugeA />;
};

💻 Online Demo

🤝 Contributing

$ git clone [email protected]:kangyana/react-loadable-dynamic.git
$ cd hooks