npm i create-async-component

A factory function for creating asynchronous React components.

Quick Start

```jsx harmony import * as React from 'react' import createAsyncComponent from 'create-async-component'

const AsyncComponent = createAsyncComponent( () => import('./Home').then((mod) => mod.default), { loading: (homeProps) =>

// Optionally preload the component AsyncComponent.load()

// Use the component as you would any other component

<AsyncComponent foo='bar'/>

## API

```typescript
function createAsyncComponent<P>(
  componentGetter: AsyncComponentGetter<P>,
  options: AsyncComponentOptions<P> = {}
): AsyncComponent<P>

Returns AsyncComponent

Preload your component

// Simply call its load() method
AsyncComponent.load()
// Real world example
<Link onMouseEnter={AsyncComponent.load}/>

AsyncComponentGetter

export type AsyncComponentGetter<P> = () => AsyncComponentInterop<P>
export type AsyncComponentInterop<P> =
  | Promise<React.ComponentType<P>>
  | React.ComponentType<P>

AsyncComponentOptions

export interface AsyncComponentOptions<P> {
  /**
   * This component will be renderered while the async component is loading
   */
  loading?: React.FC<P>
  /**
   * This component will be renderered when there is an error getting
   * the async component
   */
  error?: (exception: any, props: P) => ReturnType<React.FC<P>>
}

AsyncComponent

export interface AsyncComponent<P> extends React.FC<P> {
  /**
   * Starts preloading the asynchronous component
   */
  load: () => Promise<React.ComponentType<P>>
}

LICENSE

MIT