react-promise-renderer

Overview

Declarative promise handling in React.

Install

Using npm

npm i react-promise-renderer --save

Then, use it as usual:

// using ES6 modules
import createPromiseRenderer from 'react-promise-renderer'

// using CommonJS modules
var createPromiseRenderer = require('react-promise-renderer').createPromiseRenderer

UMD build

The UMD build is also available on unpkg:

<script src="https://unpkg.com/react-promise-renderer"></script>

The package is avalable on window.ReactPromiseRenderer

Usage

Declarative

import createPromiseRenderer from 'react-promise-renderer'

const PromiseRenderer = createPromiseRenderer(value => Promise.resolve(42))

const Example = () => (
  <PromiseRenderer>
    <PromiseRenderer.Running>
      <div>Loading...</div>
    </PromiseRenderer.Running>
    <PromiseRenderer.Result>{result => <div>The result of function call is {result}</div>}</PromiseRenderer.Result>
    <PromiseRenderer.Rejected>{reason => <div>Error: {reason}</div>}</PromiseRenderer.Rejected>
  </PromiseRenderer>
)

Render Props

import createPromiseRenderer from 'react-promise-renderer'

const PromiseRenderer = createPromiseRenderer(value => Promise.resolve(42))

const Example = () => (
  <PromiseRenderer>
    {({ running, result, rejected, hasResult, rejectReason }) => (
      <div>
        {running && <div>Loading...</div>}
        {hasResult && <div>The result of function call is {result}</div>}
        {rejected && <div>Error: {rejectReason}</div>}
      </div>
    )}
  </PromiseRenderer>
)

Data Fetching

Incremental Data Fetching

API

See API reference here

Change Log

You can find change log here

Credits

Great thanks to @kitos and @ventrz for their invaluable help, support and bright ideas!