react-use-fetch

React hook for using fetch.

Disclaimer

This module uses the upcoming React Hooks API Proposal which is subject to change until released to a final version.

This means that the API of this module is also subject to change. Please don't use it on a production application.

Disclaimer #2

While this works and is an interesting use of hooks, it might be a better idea to use Suspense for fetching data.

Suspense isn't still fully released, but you can start using it with React.lazy.

Installation

Using npm:

$ npm install --save react-use-fetch

Using yarn:

$ yarn add react-use-fetch

Since this module uses React's upcoming Hooks feature, to try this out you'll need to install the 16.7.0-alpha.0 version of react and react-dom:

$ yarn add react@16.7.0-alpha.0 react-dom@16.7.0-alpha.0

Usage

import React from 'react';
import useFetch, { useJsonResponse } from 'react-use-fetch';

function Example() {
  const { response } = useFetch('https://api.github.com/users/bsonntag');
  const [json] = useJsonResponse(response);

  if (!json) {
    return <p>Loading...</p>;
  }

  if (!response.ok) {
    return <p>Error: {json.message}</p>;
  }

  return (
    <>
      <h1>{json.name}</h1>
      <img src={json.avatar_url} />
    </>
  );
}

API

useFetch(input: string | Request, init?: Object): {
  error: ?Error,
  response: ?Response
}

Receives the same arguments as fetch and returns an object with the response and the request error.

useJsonResponse(response: ?Response): [?Object, ?Error];

Receives a fetch response and returns a tuple with the result of response.json() and the error of parsing. If the response is null or undefined nothing is done.

Contributing

Please feel free to submit any issues or pull requests.

License

MIT