react-async

a react.js component for general promise

react-promise NPM badge

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/>

Related Repositories

react-resolver

react-resolver

Async rendering & data-fetching for universal React applications. ...

redux-react-router-async-example

redux-react-router-async-example

A showcase of the Redux architecture with React Router ...

redux-async-connect

redux-async-connect

It allows you to request async data, store them in redux state and connect them to your react component. ...

react-async

react-async

Asynchronously fetch data for React components ...

async-reactor

async-reactor

Render async Stateless Functional Components in React ...