https://github.com/petergombos/react-pledge

Declarative way to track promise lifecycle states using "render props" 🕶
https://github.com/petergombos/react-pledge

Last synced: 9 days ago
JSON representation

Declarative way to track promise lifecycle states using "render props" 🕶

• Host: GitHub
• URL: https://github.com/petergombos/react-pledge
• Owner: petergombos
• License: mit
• Created: 2018-04-28T17:35:08.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-05-07T11:04:53.000Z (over 6 years ago)
• Last Synced: 2024-10-11T15:49:36.000Z (28 days ago)
• Language: JavaScript
• Homepage:
• Size: 61.5 KB
• Stars: 141
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-react-render-props - react-pledge
• awesome-react-render-props - react-pledge

README

        
# React Pledge

Declarative way to track promise lifecycle states using "render props" 🕶

✅ Zero dependencies

✅ Tiny **896 B gzipped**

## Usage

```js

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 = () => (

  

    {(handleSubmit, { pending, resolved, value, rejected, error }) => (

      


        


          {pending ? (

            'Loading...'

          ) : rejected ? (

            error.message

          ) : resolved ? (

            Woohoo, success!!!

          ) : null}

        

        

          {pending ? 'Submitting' : 'Submit'}

        

        {resolved && 
The returned value of the promise is: {value}
}

      

    )}

  

)

```


### [Simple Example](https://codesandbox.io/s/2z06vmyv0y)

## Installation

```bash

npm install --save react-pledge

```

or

```bash

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