Nuclear Powered Macros

    await-component

    0.1.1 • Public • Published

    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

    Keywords

    none

    Install

    npm i await-component

    DownloadsWeekly Downloads

    10

    Version

    0.1.1

    License

    none

    Last publish

    Collaborators

    • amccloud