async-reactor
Render async Stateless Functional Components
Installation
npm install --save async-reactor
Usage
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
Loading ...
);
}
async function Time() {
const moment = await import('moment');
const time = moment();
return (
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);
{time.format('MM-DD-YYYY')}
);
}
export default asyncReactor(Time, Loader);">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
Loading ...
);
}
async function AsyncPosts() {
const data = await fetch('https://jsonplaceholder.typicode.com/posts');
const posts = await data.json();
return (
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);
-
{posts.map((x) =>
- {x.title} )}
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);