react-promise

react-promise

a react.js component for general promise - no need for stateful component just to render a value hidden behind a promise or for a simple form. Let's consider a trivial example: you have a promise such as this

let prom = new Promise(function (resolve, reject) {
 setTimeout(function () {
   resolve('a value')
 }, 100)
})

and you want to make a component, which renders out in it's body 'a value'. Without react-async, such component looks like this:

class ExampleWithoutAsync extends React.Component { // you can't use stateless component because you need a state
  constructor () {
    super()
    this.state = {}
    prom.then((value) => {
      this.setState({val: value})
    })
  }
  render () {
    if (!this.state.val) return
    return <div>{this.state.val}</div>
  }

and with react-async:

import Async from 'react-promise'

const ExampleWithAsync = (props) => <Async promise={prom} then={(val) => <div>{val}</div>}/>

Much simpler, right?

In case you need user input before you can make the async call, there is a before property. Assign a function into it if you need to render a form for example.

<Async before={(handlePromise) => {
  return <form>
    <input></input>
    <button onClick={() => {
      handlePromise(Promise.resolve('awesome data'))
    }}>do something async like a POST request</button>
  </form>
}}
/>

The form is rendered before the promise is resolved. If you ever need to reset the Async to before after promise has resolved/rejected get the Async ref and use

ref.setState({started: false})

install

With jspm:

jspm i npm:react-promise

or with npm:

npm i react-promise

Available props:

All props are optional

• promise a promise you want to wait for
• before if no promise is provided, Async will invoke this inside it's render method-use for forms and such
• then runs when promise is resolved. Async will run function provided in it's render passing a resolved value as first parameter.
• catch runs when promise is rejected. Async will run function provided in it's render passing an error as first parameter.
• pendingRender is a node which will be outputted from Async render method while promise is pending. If none is provided, defaults to <div/>

To use with Typescript

import Async, { Props as AsyncProps } from 'react-promise'

const StringAsync = Async as { new (props: AsyncProps<string>): Async<string> }

The type used for the generic will be matched against the type for the promise's value. This workaround is necessary because currently there's no way to directly supply generic types in Typescript.