react-fetch-hook

react-fetch-hook

React hook, which allows you to conveniently work with fetch. Good Flow support.

Installation

Install it with yarn:

yarn add react-fetch-hook

Or with npm:

npm i react-fetch-hook --save

Usage

useFetch hook accepts the same arguments as fetch function.

import React from "react";
import { useFetch } from "react-fetch-hook";

const Component = () => {
  const { isLoading, data } = useFetch("https://swapi.co/api/people/1");

  return isLoading ? (
    <div>Loading...</div>
  ) : (
    <UserProfile {...data} />
  );
};

You can pass any fetch options:

const { isLoading, data } = useFetch("https://swapi.co/api/people/1", {
    method: "get",
    headers: {
        Accept: "application/json, application/xml, text/plain, text/html, *.*",
        "Content-Type": "application/json; charset=utf-8"
    }
});

Custom formatter

You can pass formatter prop for using custom formatter function. Default is used response => response.json() formatter.

const { isLoading, data } = useFetch("https://swapi.co/api/people/1", {
    formatter: (response) => response.text()
});

Prevent call fetch

For prevent call fetch you can pass depends prop:

const {authToken} = useContext(authTokenContext);
const [someState, setSomeState] = useState(false);
const { isLoading, data } = useFetch("https://swapi.co/api/people/1", {
    depends: [!!authToken, someState] //don't call request, if haven't authToken and someState: false
});

Motivation: you can apply hooks only at top level of function. Calling hooks inside if or for statements, or change count of hooks may throw React error.

// Potential сrash, because may call different count of hooks:
const {authToken} = useContext(authTokenContext);
if (!authToken) {
    return null;
}
const { isLoading, data } = useFetch("https://swapi.co/api/people/1");