async-reactor
Render async Stateless Functional Components
Installation
npm install --save async-reactorUsage
asyncReactor(component: Function, loader?: Component, error?: Component): Component| name | type | description |
|---|---|---|
| component | Function (async) | The async component you want to render |
| loader (optionnal) | Component | Will be shown until the first component renders |
| error (optionnal) | Component | Will be shown when an error occurred |
The returned value is a regular Component.
Examples
This examples are exporting a regular React component. You can integrate it into an existing application or render it on the page.
See more examples here
Using code splitting
import React from 'react'
import {asyncReactor} from 'async-reactor';
function Loader() {
return (
<b>Loading ...</b>
);
}
async function Time() {
const moment = await import('moment');
const time = moment();
return (
<div>
{time.format('MM-DD-YYYY')}
</div>
);
}
export default asyncReactor(Time, Loader);Using fetch
import React from 'react';
import {asyncReactor} from 'async-reactor';
function Loader() {
return (
<h2>Loading ...</h2>
);
}
async function AsyncPosts() {
const data = await fetch('https://jsonplaceholder.typicode.com/posts');
const posts = await data.json();
return (
<ul>
{posts.map((x) => <li key={x.id}>{x.title}</li>)}
</ul>
);
}
export default asyncReactor(AsyncPosts, Loader);