https://github.com/arthurdenner/use-fetch
React hook to fetch data with useful features.
https://github.com/arthurdenner/use-fetch
fetch hooks react
Last synced: 7 months ago
JSON representation
React hook to fetch data with useful features.
- Host: GitHub
- URL: https://github.com/arthurdenner/use-fetch
- Owner: arthurdenner
- License: mit
- Created: 2019-04-21T20:44:09.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2020-06-29T07:15:56.000Z (almost 5 years ago)
- Last Synced: 2024-11-16T20:34:51.598Z (7 months ago)
- Topics: fetch, hooks, react
- Language: TypeScript
- Homepage:
- Size: 1.37 MB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# @arthurdenner/use-fetch
[](https://www.npmjs.org/package/@arthurdenner/use-fetch)
[](#contributors)
[](https://unpkg.com/@arthurdenner/use-fetch/dist/use-fetch.cjs.js)
[](https://packagephobia.now.sh/result?p=@arthurdenner/use-fetch)
React hook to fetch data with useful features.
⚠ This library was a good experiment, but currently there are better solutions to this problem, such as [react-query](https://github.com/tannerlinsley/react-query), so I'd recommend avoiding this library as it won't be maintained anymore. ⚠
## Install
```
yarn add @arthurdenner/use-fetch
```
```
npm i @arthurdenner/use-fetch
```
## Usage
```javascript
import React from 'react';
import useFetch from '@arthurdenner/use-fetch';
function App() {
const { data: users, error, loading } = useFetch({
initialData: [],
url: 'https://jsonplaceholder.typicode.com/users',
});
if (error) {
console.log(error);
return
An error occured!;
}
if (loading) {
return
Loading...;
}
return (
{users.map(user => (
- {user.name}
))}
);
}
```
## Features
- TypeScript-friendly
- JSONP support
- localStorage cache support
- You don't pass a `cacheKey`, the hash of the URL will be used
- Abort request support (manually and when the component unmounts)
## Config
| name | type | required | description |
| ----------- | ----------- | -------- | --------------------------------------- |
| cacheKey | string | no | localStorage key to store the response |
| expiryTime | number | no | amount of time to cache the response |
| initialData | T | yes | initial data for the hook |
| isJsonP | boolean | no | indicates if the URL returns JSONP data |
| options | RequestInit | no | options accepted by the `fetch` API |
| url | string | yes | URL to be fetched |
## Return
| name | type | description |
| -------- | ------------------ | --------------------------------------- |
| abort | () => void | callback function to cancel the request |
| start | () => void | callback function to fire the request |
| data | T | data returned from the request |
| error | Error \| undefined | error occurred on the request |
| loading | boolean | indicates if the request is being made |
| canceled | boolean | indicates if the request was canceled |
## Contributors
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
## License
MIT © [Arthur Denner](https://github.com/arthurdenner/)
