Socket
Socket
Sign inDemoInstall

async-reactor

Package Overview
Dependencies
20
Maintainers
1
Versions
12
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

async-reactor

Render async Stateless Functional Components


Version published
Maintainers
1
Weekly downloads
1,102
increased by9.11%

Weekly downloads

Readme

Source

async-reactor

Render async Stateless Functional Components

Installation

npm install --save async-reactor

Usage

asyncReactor(component: Function, loader?: Component, error?: Component): Component
nametypedescription
componentFunction (async)The async component you want to render
loader (optionnal)ComponentWill be shown until the first component renders
error (optionnal)ComponentWill 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);

Keywords

FAQs

Last updated on 24 Nov 2017

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc