react-promise

[![NPM badge](https://nodei.co/npm/react-promise.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/react-promise/)

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
react-promise
Minified + gzip package size for react-promise in KB

Readme

react-promise

NPM badge

a react.js hook for general promise written in typescript. 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-promise, 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 = {}
  }
  componentDidMount() {
    prom.then((value) => {
      this.setState({val: value})
    })
  }
  render () {
    if (!this.state.val) return null
    return <div>{this.state.val}</div>
  }

// or you could use a combination of useEffect and useState hook, which is basically the implementation of this small library

and with react-promise:

import Async from 'react-promise';

const ExampleWithAsync = (props) => {
  const {value, loading} = usePromise<string>(prom)
  if (loading) return null
  return <div>{value}</div>}
}

API

The only argument can be a promise or a promise resolving thunk:

usePromise<T>(
  promiseOrFn: (() => Promise<T>) | Promise<T>
)

it might be desirable to let the usePromise call the promise returnig function, because you often don't want to do that inside the render of your functional component.

Full state object interface returned by the hook looks like:

{
  loading: boolean
  error: Error | null
  value: T | undefined // where T is your shape of the resolved data you expect obviously
}

install

With npm:

npm i react-promise

For version 2 docs, refer to the old readme.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.