react-promise-component
Sane promise chaining for React!
Install
npm i react-promise-component react --save
Usage
;;; const fetchTracks = ; const defaultState = value: '' results: undefined error: undefined; Component { this; } // Uncaught errors from the Search component will hit this error boundary. // https://reactjs.org/docs/error-boundaries.html { this; } { this; }; { if nextStatevalue !== thisstatevalue thisSearch = nextStatevalue && // the promise chain starts executing when the Search component mounts // if the Search component unmounts before we reach here, then this callback will not execute ; } { const value results error = thisstate; if error return <div>An error occurred!</div>; return <div> <input type="text" onChange=thisonChange value=value /> results && resultstracksitems thisSearch && <thisSearch /> </div> ; } ;
API
createPromiseComponent(<Promise|any>) => <PromiseComponent>
Creates a PromiseComponent that starts execution of it's promise chain when mounted and halts execution of the promise chain when unmounted.
PromiseComponent.then(<Function>, <Function>) => <PromiseComponent>
Similar to Promise.prototype.then.
PromiseComponent.catch(<Function>) => <PromiseComponent>
Similar to Promise.prototype.catch.
PromiseComponent.finally(<Function>) => <PromiseComponent>
Similar to Promise.prototype.finally.
Uncaught errors
Uncaught errors in the promise chain will bubble up the React tree until it hits an Error Boundary.