fetcher-hook

useFetch

Asynchronously use fetch for requests within React components.

Installation

$ npm i fetcher-hook

Usage

Provide your fetch config or api string and handle the response.

import { Fragment } from "react";
import useFetch from "fetcher-hook";

const { pending, data, error, sendRequest, cancelRequest } = useFetch(
  "http://fake.com/api/resource"
);

return pending ? (
  <Fragment>
    <p>Loading...</p>
    <button onClick={cancelRequest}>Click here to cancel request.</button>
  </Fragment>
) : data ? (
  "Data: " + JSON.stringify(data)
) : error ? (
  <button onClick={sendRequest}>
    Error: {error.toString()}. Click here to try again.
  </button>
) : (
  <button onClick={sendRequest}>Click here to send request.</button>
);

Available IN Props And Definitions

The hook only accepts one param, which can either be a string or an object. If it's a string, the param is assumed to be the url to fetch from and it's plugged-in directly to the fetch, otherwise, if it's an object, there's a few 'settings' props available to modify the request.

• requestCondition: a conditional statement that must be satisfied in order to run the request.
• initialPendingState: a boolean to define the initial pending state.
• initialDataState: a value to define the initial data state.
• initialErrorState: a value to define the initial error state.
• defer: a boolean to define whether or not the request should run on mount or be deferred until manually called.
• persistData: a boolean to define whether or not the data state should be persisted on each new request.
• persistError: a boolean to define whether or not the error state should be persisted on each new request.
• onStart: a function that'll run before the business logic for the request begins.
• onSuccess: a function that'll run on a successful request, with the request data provided as a param.
• onFail: a function that'll run on a failed request, with the request error provided as a param.
• onFinish: a function that'll run once the request has completed (successfully or unsuccessfully).

It is assumed that any other prop(s) that's provided is to be used for the actual fetch function.

Available OUT Props And Definitions

• pending: whether the request is active or not.
• data: the response data from the request.
• error: the response error from the request.
• setPending: custom setter for pending state.
• setData: custom setter for data state.
• setError: custom setter for error state.
• sendRequest: function to manually send request.
• cancelRequest: function to manually cancel request.