async-reactor

by xtuc

Render async Stateless Functional Components in React

453 Stars 26 Forks Last release: almost 3 years ago (v1.2.2) MIT License 72 Commits 11 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

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

import React from 'react'
import {asyncReactor} from 'async-reactor';

function Loader() { return ( Loading ... ); }

async function Time() { const moment = await import('moment'); const time = moment();

return (

{time.format('MM-DD-YYYY')}
); }

export default asyncReactor(Time, Loader);

Using fetch

import React from 'react';
import {asyncReactor} from 'async-reactor';

function Loader() {

return (

Loading ...

); }

async function AsyncPosts() { const data = await fetch('https://jsonplaceholder.typicode.com/posts'); const posts = await data.json();

return (

    {posts.map((x) =>
  • {x.title}
  • )}
); }

export default asyncReactor(AsyncPosts, Loader);

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.