# @ultraq/react-async-component

> Load components asynchronously

Latest version **1.1.0** (published 2021-10-05) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @ultraq/react-async-component
pnpm add @ultraq/react-async-component
yarn add @ultraq/react-async-component
bun add @ultraq/react-async-component
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2021-10-05 |
| First published | 2020-02-21 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 1 |
| Unpacked size | 33.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Emanuel Rabina |
| Maintainers | ultraq |

## Links

- npm: https://www.npmjs.com/package/@ultraq/react-async-component
- Repository: https://github.com/ultraq/react-async-component
- Homepage: https://github.com/ultraq/react-async-component#readme
- Issues: https://github.com/ultraq/react-async-component/issues
- npm.io page: https://npm.io/package/@ultraq/react-async-component

## Dependencies (1)

- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.15.4

## Recent versions

- 1.1.0 (latest) — 2021-10-05
- 1.0.0 — 2020-03-09
- 0.1.1 — 2020-03-03
- 0.1.0 — 2020-02-21

## README

react-async-component
=====================

[![Build Status](https://github.com/ultraq/react-async-component/actions/workflows/build.yml/badge.svg)](https://github.com/ultraq/react-async-component/actions)
[![Coverage Status](https://coveralls.io/repos/github/ultraq/react-async-component/badge.svg?branch=main)](https://coveralls.io/github/ultraq/react-async-component?branch=main)
[![npm](https://img.shields.io/npm/v/@ultraq/react-async-component.svg?maxAge=3600)](https://www.npmjs.com/package/@ultraq/react-async-component)
[![Bundlephobia minified size](https://img.shields.io/bundlephobia/min/@ultraq/react-async-component)](https://bundlephobia.com/result?p=@ultraq/react-async-component)

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:

```javascript
<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.

---
_Source: https://npm.io/package/@ultraq/react-async-component · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._