use-fetch's Introduction

@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, 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

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
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