xtuc / Async Reactor
Licence: mit
Render async Stateless Functional Components in React
Stars: ✭ 452
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
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
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
Orleankka
Functional API for Microsoft Orleans http://orleanscontrib.github.io/Orleankka/
Stars: ✭ 429 (-5.09%)
Mutual labels: functional
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].