@vlsergey/react-promise

Promises components for ReactJS

Simple ReactJS components for Promise calculation.

Usage with single Promise

import { PromiseComponent } from "@vlsergey/react-promise";
/* ... */
const promise
return <PromiseComponent
    fallback={<span>Calculating...</span>}
    promise={ promise }>
        {(data) => <span>Promise result: {JSON.stringify(data)}}</span>}
</PromiseComponent>;

Usage with multiple Promise's

import { PromisesComponent } from "@vlsergey/react-promise";

/* ... */
const multiplePromises = {
    promise1: Promise.resolve("First promise result"),
    promise2: new Promise( (resolve, reject) => { /*...*/ } ),
};
return <PromisesComponent
    promises={ multiplePromises }>
        {(data) => <ul>
            <li>First promise result: {JSON.stringify(data.promise1)}}</li>
            <li>Second promise result: {JSON.stringify(data.promise2)}}</li>
        </ul>		}
</PromiseComponent>;

Important notice

• One shall not create new promise in render() method of component. Promise shall be created in componentDidMount() method of component. Another way is to use memoize function in render() method:

import memoizeOne from "memoize-one";
import { PromiseComponent } from "@vlsergey/react-promise";

class MyComponent extends PureComponent {
    constructor() {
        super(...arguments);
        this.promiseFactory = memoizeOne(  (arg1, arg2) => new Promise( /*...*/ )  );
    }

    render() {
        const { arg1, arg2 } = this.props;
        const promise = this.promiseFactory( arg1, arg2 );
        return <PromiseComponent promise={promise}>/*...*/</PromiseComponent>;
    }
}

Changelog

Unspecified minor versions are for dependencies updates.

3.2.0

• 📦 Add hybrid CommonJS + ESM packaging.

3.1.0

• Replace autobind-decorator with arrow function per @bradzacher advise in typescript-eslint/typescript-eslint#3245.

3.0.0

• ⚡ Move from flow to TypeScript.

2.6.0

• 🐛 Support null and undefined as result of Promise (and let user decide what to do with it).

2.2.0

• 🐎 Less rerendering in some cases (like already resolved Promise or shallow-same promises object in PromisesComponent)

2.0.0

• 📦 Add flow type definitions to result package

1.0.1

• 🎉 Initial version