# @jameslnewell/react-promise
> React hooks for working with promises.
Latest version **3.3.0** (published 2019-11-12) · MIT license · 0 weekly downloads
## Install
```sh
npm install @jameslnewell/react-promise
pnpm add @jameslnewell/react-promise
yarn add @jameslnewell/react-promise
bun add @jameslnewell/react-promise
```
## Health
**Score 30/100 (F)** — status: abandoned.
Positive: has types; esm support; no vulnerabilities; high quality score.
Warnings: low downloads.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 3.3.0 |
| Published | 2019-11-12 |
| First published | 2019-05-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 113.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | jameslnewell |
| Keywords | react, hooks, react-promise, react-hook, react-hooks, promise, promises, resolve, reject, resolving, resolved, rejected, jameslnewell |
## Links
- npm: https://www.npmjs.com/package/@jameslnewell/react-promise
- Repository: https://github.com/jameslnewell/react-promise
- Homepage: https://github.com/jameslnewell/react-promise#readme
- Issues: https://github.com/jameslnewell/react-promise/issues
- npm.io page: https://npm.io/package/@jameslnewell/react-promise
## Alternatives
- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads
## Recent versions
- 3.3.0 (latest) — 2019-11-12
- 5.0.0-preview.3 (next) — 2021-07-31
- 4.0.0-preview.2 (preview) — 2021-02-18
- 5.0.0-preview.2 — 2021-07-30
- 5.0.0-preview.1 — 2021-07-28
- 4.0.0-preview.11 — 2021-05-27
- 4.0.0-preview.10 — 2021-03-03
- 4.0.0-preview.9 — 2021-02-22
- 4.0.0-preview.8 — 2021-02-20
- 4.0.0-preview.7 — 2021-02-20
- 4.0.0-preview.6 — 2021-02-19
- 4.0.0-preview.5 — 2021-02-19
- 4.0.0-preview.4 — 2021-02-19
- 4.0.0-preview.3 — 2021-02-19
- 4.0.0-preview.1 — 2021-02-17
- … 16 more at https://npm.io/package/@jameslnewell/react-promise/versions
## README
# @jameslnewell/react-promise
[](https://bundlephobia.com/result?p=@jameslnewell/react-promise)
[](https://github.com/jameslnewell/react-promise/actions)
🎣 React hooks for working with promises.
> If you need to work with promises, try [`@jameslnewell/react-observable`](https://github.com/jameslnewell/react-observable).
## Installation
NPM:
```bash
npm install @jameslnewell/react-promise
```
Yarn:
```bash
yarn add @jameslnewell/react-promise
```
## Usage
> [You'll find a working example of `react-promise` in CodeSandbox](https://codesandbox.io/s/jameslnewellreactpromise-xe0om).
### usePromise
Start resolving a promise immediately e.g. fetch data from the server when a component is mounted
```js
import React from 'react';
import {usePromise} from '@jameslnewell/react-promise';
const getUser = async (id) => {
const res = await fetch(`/user/${id}`, {method: 'GET'});
const data = await res.json();
return data;
};
const UserProfile = ({id}) => {
const [user, {status}] = usePromise(() => getUsername(id), [id]);
switch (status) {
case 'pending':
return <>Loading...;
case 'fulfilled':
return (
<>
Hello {user.name}!
);
case 'rejected':
return (
<>
Sorry, we couldn't find that user.
<>
);
}
};
```
### useInvokablePromise
Start resolving a promise when triggered e.g. change data on the server after the user clicks a button
```js
import React, {useState, useEffect} from 'react';
import {useInvokablePromise} from '@jameslnewell/react-promise';
const putUser = async (id, data) => {
await fetch(`/user/${id}`, {
method: 'POST',
body: JSON.stringify(data),
});
};
const EditUserProfile = ({id}) => {
const input = React.useRef(null);
const [save, , {isPending}] = useInvokablePromise(data => putUser(id, data), [
id,
]);
const handleSave = async event => save(id, {name: input.current.value});
return (
<>
);
};
```
## API
### usePromise()
Immediately executes an operation.
#### Parameters:
- `fn` - A function that returns the promise to be fulfilled.
- `deps` - Any value that the function is dependent on and should trigger a new promise to be resolved.
#### Returns:
- `[0]` - The value returned by the operation.
- `[1].status` - Whether the promise is pending, fulfilled or rejected.
- `[1].error` - The reason why the promise was rejected.
- `[1].isPending` - Whether we're waiting for the promise to be fulfilled or rejected.
- `[1].isFulfilled` - Whether the promise has been fulfilled.
- `[1].isRejected`- Whether the promise has rejected
### useInvokablePromise()
Executes an operation when the `invoke` method is called.
#### Parameters:
- `fn` - A function that returns the observable to be observed.
- `deps` - Any value that the function is dependent on and should trigger a new subscription on a new promise.
#### Returns:
- `[0]` - A function to invoke the operation.
- `[1]` - The value returned by the operation.
- `[2].status` - Whether the promise is pending, fulfilled or rejected.
- `[2].error` - The reason why the promise was rejected.
- `[2].isPending` - Whether we're waiting for the promise to be fulfilled or rejected.
- `[2].isFulfilled` - Whether the promise has been fulfilled.
- `[2].isRejected`- Whether the promise has rejected
---
_Source: https://npm.io/package/@jameslnewell/react-promise · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._