React Promise HOC

React HOC for easy promise handling.

Installation

yarn add react-promise-hoc or npm i react-promise-hoc

Usage

import React, { SFC } from 'react'
import promiseHoc, { InjectedPromiseHocProps } from 'react-promise-hoc'

const Post: SFC<InjectedPromiseHocProps> = ({ isLoading, post, refetch }) =>
  isLoading
    ? <p>Loading...</p>
    : (
      <div>
        <h1>{post.title}</h1>
        <p>{post.content}</p>
        <button onClick={refetch}>Refetch</button>
      </div>
    )

export default promiseHoc((props) => ({
  post: axios.get(`https://jsonplaceholder.typicode.com/posts/${props.id}`)
}), (err, data, props) => { /* gets invoked when promise ir rejected / resolved */ })(Post)

// also possible to provide an array
// notice: this will provide a prop called data which will be an array of the resolved data
export default promiseHoc((props) => ([
  axios.get(`https://jsonplaceholder.typicode.com/posts/${props.id}`)
]))(Post)

Documentation

Injected props to child component

Props	Type	Description
isLoading	boolean	Set to true when promise(s) are pending and false when done.
data	array	If an array is passed this will be set to the resolved data as an array
err	object	The error object if one ore more promises got rejected.
refetch	function	When called the promises will reinvoke