All Projects → xtuc → Async Reactor

xtuc / Async Reactor

Licence: mit
Render async Stateless Functional Components in React

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Async Reactor

Asyncninja
A complete set of primitives for concurrency and reactive programming on Swift
Stars: ✭ 146 (-67.7%)
Mutual labels:  async, functional
Redux Most
Most.js based middleware for Redux. Handle async actions with monadic streams & reactive programming.
Stars: ✭ 137 (-69.69%)
Mutual labels:  async, functional
Reason Loadable
🔥 Suspense/Lazy for ReasonReact.
Stars: ✭ 88 (-80.53%)
Mutual labels:  code-splitting, component
React Component Library
A project skeleton to get your very own React Component Library up and running using Rollup, Typescript, SASS + Storybook
Stars: ✭ 313 (-30.75%)
Mutual labels:  code-splitting, component
Switzerland
🇨🇭Switzerland takes a functional approach to Web Components by applying middleware to your components. Supports Redux, attribute mutations, CSS variables, React-esque setState/state, etc… out-of-the-box, along with Shadow DOM for style encapsulation and Custom Elements for interoperability.
Stars: ✭ 261 (-42.26%)
Mutual labels:  functional, component
Hitchcock
The Master of Suspense 🍿
Stars: ✭ 167 (-63.05%)
Mutual labels:  async, component
Suave
Suave is a simple web development F# library providing a lightweight web server and a set of combinators to manipulate route flow and task composition.
Stars: ✭ 1,196 (+164.6%)
Mutual labels:  async, functional
Aioreactive
Async/await reactive tools for Python 3.9+
Stars: ✭ 215 (-52.43%)
Mutual labels:  async, functional
React Loadable
⏳ A higher order component for loading components with promises.
Stars: ✭ 16,238 (+3492.48%)
Mutual labels:  async, code-splitting
Kotlin Flow Extensions
Extensions to the Kotlin Flow library.
Stars: ✭ 404 (-10.62%)
Mutual labels:  async, functional
React Native Blurhash
🖼️ A library to show colorful blurry placeholders while your content loads.
Stars: ✭ 430 (-4.87%)
Mutual labels:  component
Async sinatra
A plugin for Sinatra to provide a DSL extension for using Thin for asynchronous responses
Stars: ✭ 434 (-3.98%)
Mutual labels:  async
Bubbletea
A powerful little TUI framework 🏗
Stars: ✭ 7,886 (+1644.69%)
Mutual labels:  functional
Dragula
👌 Drag and drop so simple it hurts
Stars: ✭ 21,011 (+4548.45%)
Mutual labels:  component
Telegram Bot
Ruby gem for building Telegram Bot with optional Rails integration
Stars: ✭ 433 (-4.2%)
Mutual labels:  async
Typewritten
A minimal, lightweight, informative zsh prompt theme
Stars: ✭ 442 (-2.21%)
Mutual labels:  async
Create React Library
⚡CLI for creating reusable react libraries.
Stars: ✭ 4,554 (+907.52%)
Mutual labels:  component
Emoji Mart
One component to pick them all 👊🏼
Stars: ✭ 4,687 (+936.95%)
Mutual labels:  component
Orleankka
Functional API for Microsoft Orleans http://orleanscontrib.github.io/Orleankka/
Stars: ✭ 429 (-5.09%)
Mutual labels:  functional
Pawl
Asynchronous WebSocket client
Stars: ✭ 448 (-0.88%)
Mutual labels:  async

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);
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].