@ovotech/async-reactor-ts
Render async Stateless Functional Components in React, using Typescript
Last updated 2 years ago by ikerin .
MIT · Repository · Original npm · Tarball · package.json
$ cnpm install @ovotech/async-reactor-ts 
SYNC missed versions from official npm registry.

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

Current Tags

  • 0.2.0                                ...           latest (2 years ago)

2 Versions

  • 0.2.0                                ...           2 years ago
  • 0.1.0                                ...           2 years ago
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 1
Dependencies (0)
None
Dev Dependencies (14)
Dependents (0)
None

Copyright 2014 - 2017 © taobao.org |