@arthurdenner/use-fetch
React hook to fetch data with useful features.
Install
yarn add @arthurdenner/use-fetch
npm i @arthurdenner/use-fetch
Usage
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 <div>An error occured!</div>;
}
if (loading) {
return <div>Loading...</div>;
}
return (
<div>
<ul>
{users.map(user => (
<li>{user.name}</li>
))}
</ul>
</div>
);
}Features
- TypeScript-friendly
- JSONP support
- localStorage cache support
- You don't pass a
cacheKey, the hash of the URL will be used
- You don't pass a
- 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):
 Arthur Denner |
This project follows the all-contributors specification. Contributions of any kind welcome!
License
MIT © Arthur Denner