Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/saivanji/promise-hook
Hook, simplifying dealing with Promises inside of React components
https://github.com/saivanji/promise-hook
Last synced: 2 months ago
JSON representation
Hook, simplifying dealing with Promises inside of React components
- Host: GitHub
- URL: https://github.com/saivanji/promise-hook
- Owner: saivanji
- License: mit
- Created: 2018-10-29T17:51:52.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2019-11-15T06:57:10.000Z (almost 5 years ago)
- Last Synced: 2024-05-10T04:07:53.500Z (5 months ago)
- Language: JavaScript
- Size: 13.7 KB
- Stars: 54
- Watchers: 2
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# promise-hook
## Installation
Install it with yarn:
```
yarn add promise-hook
```
Or with npm:
```
npm i promise-hook --save
```
## Demo
The simplest way to start playing around with `promise-hook` is with this CodeSandbox snippet:
https://codesandbox.io/s/ykmklm6m21
## Simple data fetching
In order to fetch the data, you need to pass a Promise returning function as a first argument to `usePromise` hook. It will return you back response related payload such as resolved data, request status or the error if it exists.
`resolve` option is used to initiate data fetching when component mounts.
```javascript
import React from "react";
import { usePromise } from "promise-hook";
const Movies = () => {
const { isLoading, data } = usePromise(fetchMovies, { resolve: true });
return isLoading ? (
Loading...
) : (
{data.map(movie => (
{movie.title}
))}
);
};
const fetchMovies = () =>
fetch(`http://your-amazing-api.com/movies`).then(res => res.json());
```
## Passing arguments
In order to pass some arguments to the Promise function, you need to use arrow function wrapper and pass needed argument from a closure.
By default, when `resolve` option is enabled, data fetching is initiated only on the first render. But you can control it with `resolveCondition` setting. If an array of variables passed will be changed - data fetching will be initiated again.
```javascript
import React from "react";
import { usePromise } from "promise-hook";
const Movies = ({ category }) => {
const { isLoading, data } = usePromise(() => fetchMovies(category), {
resolve: true,
resolveCondition: [category]
});
return isLoading ? (
Loading...
) : (
{data.map(movie => (
{movie.title}
))}
);
};
const fetchMovies = category =>
fetch(`http://your-amazing-api.com/movies/${category}`).then(res =>
res.json()
);
```
## Fetching on demand
When you need to send any request on demand instead of component mount, you can use `request` function returned from the `usePromise` hook.
After that function is called, data fetching will be started and payload variables such as `isLoading` etc will be updated accordingly.
```javascript
import React from "react";
import { usePromise } from "promise-hook";
import { Form, Input, Button } from "./Form";
const SignUp = () => {
const { isLoading, request } = usePromise(signUp);
return (
request(data)}>
{isLoading ? "Signing up..." : "Sign up"}
);
};
const signUp = data =>
fetch(`http://your-amazing-api.com/users`, {
method: "POST",
body: data
}).then(res => res.json());
```
## Error handling
Once the error was happened during the request, an `error` variable will be populated with the corresponding error object. You can use it afterwards for displaying apropriate error message in the UI.
```javascript
import React from "react";
import { usePromise } from "promise-hook";
const Movies = () => {
const { isLoading, data, error } = usePromise(fetchMovies, {
resolve: true
});
return isLoading ? (
Loading...
) : error ? (
Error loading movies - {error.message}
) : (
{data.map(movie => (
{movie.title}
))}
);
};
const fetchMovies = () =>
fetch(`http://your-amazing-api.com/movies`).then(res => res.json());
```
## TODO
- Promise cancelling.
- Caching.
- Resetting / Updating response state.
- Middleware support.