- ×
Render async Stateless Functional Components in React
Filed under user interfaceShow Allasync-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 renderloader (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);