async-reactor-ts
Render async Stateless Functional Components, using Typescript
Installation
yarn add async-reactor-ts
It has peer dependencies of "react" and "react-dom"
Usage
import * as React from 'react';
import { AsyncReactor } from '@ovotech/async-reactor-ts';
const Home = (
<AsyncReactor loader={() => someAsnycStuff()}>
{({ loading, result }) => {
if (loading) {
return <div>Loading</div>;
}
return <div>Home Screen {result}</div>;
}}
</AsyncReactor>
);
You'll receive the result of the async loader call in the "result" prop
Handle errors
If there is an error in the loader, you will receive it as an "error" prop
import * as React from 'react';
import { AsyncReactor } from '@ovotech/async-reactor-ts';
const Home = (
<AsyncReactor loader={() => someAsnycStuff()}>
{({ loading, error }) => {
if (loading) {
return <div>Loading</div>;
}
if (error) {
return <div>Error {error.message}</div>;
}
return <div>Home Screen</div>;
}}
</AsyncReactor>
);
Example using fetch
import * as React from 'react';
import { AsyncReactor } from '@ovotech/async-reactor-ts';
const Home = (
<AsyncReactor
loader={async () => {
const data = await fetch('https://jsonplaceholder.typicode.com/posts');
return await data.json();
}}
>
{({ loading, result }) => {
if (loading) {
return <div>Loading</div>;
}
return <ul>{result.map(x => <li key={x.id}>{x.title}</li>)}</ul>;
}}
</AsyncReactor>
);
Development
In order to develop on this package:
git clone git@github.com:ovotech/async-reactor-ts.git
cd async-reactor-ts
yarn
Running tests
yarn lint
yarn test
Deploying new versions
New versions are deployed using "Github Releases" feature. We use SemVer for versioning. For the versions available, see npm async-reactor-ts.
Authors
- Ivan Kerin - Initial work - ivank
See also the list of contributors who participated in this project.
License
This project is licensed under the MIT License - see the LICENSE.md file for details
Acknowledgments
Inspired by async-reactor project