https://github.com/xtuc/async-reactor

Render async Stateless Functional Components in React
https://github.com/xtuc/async-reactor

async code-splitting component functional react stateless

Last synced: 3 days ago
JSON representation

Render async Stateless Functional Components in React

• Host: GitHub
• URL: https://github.com/xtuc/async-reactor
• Owner: xtuc
• License: mit
• Created: 2017-04-10T18:26:19.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2017-11-24T15:05:49.000Z (almost 7 years ago)
• Last Synced: 2024-09-28T09:19:24.987Z (about 2 months ago)
• Topics: async, code-splitting, component, functional, react, stateless
• Language: JavaScript
• Homepage:
• Size: 90.8 KB
• Stars: 445
• Watchers: 12
• Forks: 27
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# async-reactor

> Render async Stateless Functional Components

## Installation

```shell

npm install --save async-reactor

```

## Usage

```js

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](https://github.com/xtuc/async-reactor/tree/master/examples)

#### Using code splitting

```js

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

```js

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);

```