react-use-fetch-hook

React hook for fetching data

Install

npm install --save react-use-fetch-hook

Usage

import * as React from 'react'
import { useFetch } from 'react-use-fetch-hook'
const fetchUser = () => fetch('/api/me')
interface UserData {
  id: string;
  name: string;
}
const MyComponent = () => {
  const { isLoading, data, error, refetch } = useFetch<UserData>(fetchUser);
  if (isLoading) return <div>I'm loading...</div>;
  if (error) return <div>Something went wrong :(</div>;
  return <div>{user.id}</div>;
};

API

useFetch\(fetchData: (…args: any[]) => Promise\, …args: any[])

• fetchData Fetch function that returns a promise.

• ...args Arguments to be passed to fetchData function.

  Returns
  { data: S, isLoading, boolean, error: E, refetch: (...args: any[]) => Promise<S> }

• data The response data object resolved by fetchData function.

• isLoading Boolean to indicate if request is still loading.
• error Error object rejected or thrown by fetchData function.
• refetch Function to make a new request.

License

MIT © ikibalnyi