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 [email protected]: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