await-component
[![NPM version](https://img.shields.io/npm/v/await-component.svg)](https://www.npmjs.com/package/await-component)
Last updated 3 years ago by amccloud .
Original npm · Tarball · package.json
$ cnpm install await-component 
SYNC missed versions from official npm registry.

await-component

NPM version

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>
);

Changelog

See the Changelog

Contributing

See the Contributors Guide

License

MIT

Current Tags

  • 0.1.1                                ...           latest (3 years ago)

14 Versions

  • 0.1.1                                ...           3 years ago
  • 0.1.0                                ...           3 years ago
  • 0.1.0-beta.9                                ...           3 years ago
  • 0.1.0-beta.8                                ...           3 years ago
  • 0.1.0-beta.7                                ...           3 years ago
  • 0.1.0-beta.6                                ...           3 years ago
  • 0.1.0-beta.5                                ...           3 years ago
  • 0.1.0-beta.4                                ...           3 years ago
  • 0.1.0-beta.3                                ...           3 years ago
  • 0.1.0-beta.2                                ...           3 years ago
  • 0.1.0-beta.1                                ...           3 years ago
  • 0.1.0-alpha.3                                ...           3 years ago
  • 0.1.0-alpha.2                                ...           3 years ago
  • 0.1.0-alpha                                ...           3 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 2
Last Day 0
Last Week 1
Last Month 105
Dependencies (1)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |