React-async-decorator NPM

react-async-decorator

New way to organize your asynchronous flow in react applications. inspired by Dan Abramov: Beyond React 16.

Getting Started

Installing

npm install react-async-decorator

If you prefer yarn

yarn react-async-decorator

Simple example

import { asyncClass, initFetchers } from 'react-async-decorator';
const config = initFetchers();
const fetcher = config.createFetcher(() => fetch('/data.json'));

// If you don't want to use decorators, it should be replaced next syntax
// const WrapTest = asyncClass(fetcher)(Test);
@asyncClass(fetcher)
class Test extends React.Component {
    render() {
        const data = fetcher.get();
        // This content will be rendered after success response of fetch request
        return <div>{data}</div>;
    }
    renderLoader() {
        // This content will be rendered while fetch request in progress
        return <div>Loading</div>;
    }
    renderError(err) {
        // This content will be rendered after fail response of fetch request
        return <div>{err.message}</div>;
    }
}