react-loadable-dynamic
TypeScript icon, indicating that this package has built-in type declarations

1.0.5 • Public • Published

REACT LOADABLE DYNAMIC

A React Load component on demand.

NPM version NPM downloads gzip size GitHub

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

Edit demo for react-loadable-dynamic

🤝 Contributing

$ git clone git@github.com:kangyana/react-loadable-dynamic.git
$ cd hooks

Readme

Keywords

Package Sidebar

Install

npm i react-loadable-dynamic

Weekly Downloads

1

Version

1.0.5

License

MIT

Unpacked Size

66.8 kB

Total Files

12

Last publish

Collaborators

  • kangyan