Miss any of our Open RFC calls?Watch the recordings here! »

await-component

0.1.0-beta.6 • Public • Published

await-component

NPM version

Code-splitting with import() and loading boundaries

Install

yarn add await-component
import {Await, Async} 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>
);

Using JSX Pragma

/* @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

Keywords

none

Install

npm i [email protected]

Version

0.1.0-beta.6

License

none

Last publish

Collaborators

  • avatar