https://github.com/bsonntag/react-use-promise

React hook for handling promises.
https://github.com/bsonntag/react-use-promise

hook promise react react-hooks

Last synced: 18 days ago
JSON representation

React hook for handling promises.

• Host: GitHub
• URL: https://github.com/bsonntag/react-use-promise
• Owner: bsonntag
• License: mit
• Created: 2018-10-27T23:51:26.000Z (about 6 years ago)
• Default Branch: main
• Last Pushed: 2024-01-09T17:42:04.000Z (11 months ago)
• Last Synced: 2024-11-14T09:43:22.404Z (28 days ago)
• Topics: hook, promise, react, react-hooks
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/react-use-promise
• Size: 2.73 MB
• Stars: 92
• Watchers: 3
• Forks: 8
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• stars - bsonntag/react-use-promise
• awesome-ccamel - bsonntag/react-use-promise - React hook for handling promises. (JavaScript)

README

        
# react-use-promise

[![CircleCI](https://circleci.com/gh/bsonntag/react-use-promise.svg?style=svg)](https://circleci.com/gh/bsonntag/react-use-promise)

React hook for handling promises.

## Disclaimer

While this works and is an interesting use of hooks,

it might be a better idea to use Suspense when dealing with promises.

Suspense isn't still fully released, but you can start using it with

[`React.lazy`](https://reactjs.org/docs/code-splitting.html#suspense).

## Installation

Using npm:

```sh

$ npm install --save react-use-promise

```

Using yarn:

```sh

$ yarn add react-use-promise

```

Since this module uses React's new [Hooks feature](https://reactjs.org/docs/hooks-intro.html),

to try this out you'll need to install at least version `16.8.0`

of `react` and `react-dom`:

```sh

$ yarn add react@^16.8.0 react-dom@^16.8.0

```

## Usage

```js

import React, { useMemo } from 'react';

import usePromise from 'react-use-promise';

function Example() {

  const [result, error, state] = usePromise(

    () => new Promise(resolve => {

      setTimeout(() => resolve('foo'), 2000);

    }),

    []

  );

  return (

    


      
{state}

      
{result || error}

    

  );

}

```


## API

```js

usePromise(

  Promise | () => Promise,

  Array

): [

  Result,

  Error,

  'pending' | 'resolved' | 'rejected'

]

```

Receives a promise or a function that returns a promise and returns an array

with the promise's result, error and state. The state is a string that can

have one of three values: `'pending'`, `'resolved'` or `'rejected'`.

**Note:** You'll need to pass the inputs array to `usePromise`, otherwise

this will try to resolve the promise on every render. For example:

```js

const [response, error] = usePromise(

  () => fetch(url),

  [url]

);

```

This will only call `fetch` again when the `url` changes.

If you only want to resolve the promise once, pass an empty array, like this:

```js

const [result, error] = usePromise(

  () => Notification.requestPermission(),

  []

);

```

## Development

Clone the repo and install the dependencies by running `yarn` on the project's

root directory (or `npm install`, if you don't have yarn installed).

Tests can be run with `yarn test` (or `npm test`) and there's an example

application that can be run with `yarn example` (or `npm run example`).

## Contributing

Please feel free to submit any issues or pull requests.

## License

MIT