JavaScripting

The definitive source of the best
JavaScript libraries, frameworks, and plugins.


  • ×

    Async Reactor

    Render async Stateless Functional Components in React
    Filed under 

    • 🔾27%Overall
    • 446
    • 27.7 days
    • 🕩27
    • 👥6

    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 (
        <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);
    
    Show All