Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 

React Pledge

Declarative way to track promise lifecycle states using "render props" πŸ•Ά

βœ… Zero dependencies

βœ… Tiny 896 B gzipped

Usage

import React from 'react'
import Track from 'react-pledge'

const delay = (ms = 1000) =>
  new Promise((resolve, reject) => {
    setTimeout(() => resolve(), ms)
  })

const submit = async () => {
  await delay(2000)
  if (Math.random() > 0.5) {
    throw Error('Some error message πŸ€’')
  }
  return 'πŸ™Œ'
}

const App = () => (
  <Track promise={submit}>
    {(handleSubmit, { pending, resolved, value, rejected, error }) => (
      <div>
        <div>
          {pending ? (
            'Loading...'
          ) : rejected ? (
            error.message
          ) : resolved ? (
            <span>Woohoo, success!!!</span>
          ) : null}
        </div>
        <button onClick={handleSubmit} disabled={pending}>
          {pending ? 'Submitting' : 'Submit'}
        </button>
        {resolved && <div>The returned value of the promise is: {value}</div>}
      </div>
    )}
  </Track>
)

Simple Example

Installation

npm install --save react-pledge

or

yarn add react-pledge

Props

promise

A promise you want to track

children or render

A render function that will be called with the following arguments:

  • invoke function to trigger the given promise
  • state object with the current state of the promise

The state will contain the following:

  • pending: boolean
  • resolved: boolean
  • value: the returned value of the promise | null,
  • rejected: boolean,
  • error: the returned error during the rejection of the promise | null

About

Declarative way to track promise lifecycle states using "render props" πŸ•Ά

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published