@ultraq/react-async-component

    1.1.0 • Public • Published

    react-async-component

    Build Status Coverage Status npm Bundlephobia minified size

    Load react components asynchronously.

    Installation

    npm install @ultraq/react-async-component
    

    Uses Promises, so a promise polyfill is required for browsers that don't have native support for them.

    Usage

    This component aims to be used with the dynamic import syntax so that bundlers can use code-splitting to divide JavaScript artifacts into smaller chunks. One area this can take place is on route changes, so an example with react-router could look like this:

    <Route path="/my-route" render={() => (
      <AsyncComponent loader={import('./MyRoute.js')}/>
    )}/>

    Props

    Any props used on <AsyncComponent/> and not mentioned below are passed along to the component that is loaded.

    • children: optional, a function passed the component (will be null until the loader has succeeded) and component props for implementors to add any custom behaviour between the unloaded/loaded component states. Defaults to a function that renders nothing until the loader succeeds, at which point the component is rendered.
    • loader: required, the code through which a component will be loaded. In the example above we used dynamic imports, but this can be any code that returns a Promise of the loaded component.

    Keywords

    none

    Install

    npm i @ultraq/react-async-component

    DownloadsWeekly Downloads

    30

    Version

    1.1.0

    License

    Apache-2.0

    Unpacked Size

    34.5 kB

    Total Files

    10

    Last publish

    Collaborators

    • ultraq