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, so I'd recommend avoiding this library as it won't be maintained anymore. โ
yarn add @arthurdenner/use-fetch
npm i @arthurdenner/use-fetch
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>
);
}
- 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)
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 |
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 |
Thanks goes to these wonderful people (emoji key):
Arthur Denner ๐ป ๐จ ๐ ๐ก ๐ค ๐ง |
This project follows the all-contributors specification. Contributions of any kind welcome!
MIT ยฉ Arthur Denner