amccloud / await-component Goto Github PK

View Code? Open in Web Editor NEW

Code-splitting with import() and loading boundaries

License: MIT License

JavaScript 96.69% Shell 0.54% HTML 2.77%

await-component's Introduction

await-component

Code-splitting with import() and loading boundaries

Features

Supports any Promise based code-splitting API import(), require.ensure(), etc
Display a custom loading component while waiting for sub-components to load.
Handle timeouts and errors with a custom error component.
Adds delay to prevent Flash of Loading Content
Preload components with preload

Install

yarn add await-component

import {Await, Async, preload} from 'await-component';

Examples

Using `Async(() => <Promise>)`

import React from 'react';
import {Await, Async} from 'await-component';

const Container = Async(() => import('./Container'));
const Sum = Async(() => import('./Sum'));

export default () => (
  <Await loading={<div>Loading...</div>} error={<div>ERROR!</div>}>
    <Container>
      <Sum a={1} b={2} />
      <Sum a={2} b={2} />
      <Sum a={5} b={5} />
    </Container>
  </Await>
);

Preloading

import React from 'react';
import {Await, Async, preload} from 'await-component';

const Container = Async(() => import('./Container'));
const Sum = Async(() => import('./Sum'));

preload(Container);

export default () => (
  <Await loading={<div>Loading...</div>} error={<div>ERROR!</div>}>
    <Container>
      <Sum a={1} b={2} />
      <Sum a={2} b={2} />
      <Sum a={5} b={5} />
    </Container>
  </Await>
);

Using JSX Pragma (experimental)

/* @jsx Async.createElement */
import React from 'react';
import {Await, Async} from 'await-component';

const Container = import('./Container');
const Sum = import('./Sum');

export default () => (
  <Await loading={<div>Loading...</div>} error={<div>ERROR!</div>}>
    <Container>
      <Sum a={1} b={2} />
      <Sum a={2} b={2} />
      <Sum a={5} b={5} />
    </Container>
  </Await>
);