README

useFetch

Utilizes Fetch within React to grab data from HTTP resources.

Install

npm install @chrislaughlin/usefetch

Parameters

Term	Definition
URL	The HTTP resource required to fetch data.
`fetchOptions`	Additional parameters or limits to specify the fetch call.

useFetch is functional with standard Fetch options, as well as customizable options. Currently, there is only one additional option available:

Term	Definition
`timeout`	A customizable number of milliseconds measured before aborting the fetch call.

Requesting a fetch call with useFetch

useFetch is a simple function to grab data from a HTTP resource within the React web framework. To utilize useFetch, a URL is required. While fetchOptions isn't required, it is recommended to specify and customize the fetch call. Multipe fetchOptions can be used in one fetch call.

import useFetch from '@chrislaughlin/usefetch'

const Example = () => {
    
    const {
        isLoading,
        error,
        data
    } = useFetch('https://get.geojs.io/v1/ip/country.json?ip=8.8.8.8', fetchOptions)

    if (isLoading) {
        return <p>Loading.....</p>
    }

    if (error) {
        return <p>{JSON.stringify(error)}</p>
    }

    return (
        <p>
            {JSON.stringify(data)}
        </p>
    )
}

Aborting a request via custom timeout

The timeout option can be used to abort a fetch call. timeout is measured in a customizable number of milliseconds that will trigger when fully counted.

import useFetch from '@chrislaughlin/usefetch'

const CustomTimeout = () => {
    const { isLoading, error, data } = useFetch('https://get.geojs.io/v1/ip/country.json?ip=8.8.8.8', {timeout: 1000});

    if (isLoading) {
        return <p>Loading.....</p>
    }

    if (error) {
        return <p>{JSON.stringify(error)}</p>
    }

    return (
        <div>
            <p>
                {JSON.stringify(data)}
            </p>
        </div>
    )
};

Aborting a request via consuming application

With React, a fetch call can be aborted by consuming another application. This is performed by using the effect hook built natively in React.

import useFetch from '@chrislaughlin/usefetch'

const AbortExample = () => {
    const { isLoading, error, data, abortController } = useFetch('https://get.geojs.io/v1/ip/country.json?ip=8.8.8.8');

    React.useEffect(() => {
        const timer = setTimeout(() => {
            if (isLoading) {
                console.log('aborted after 100ms');
                abortController.abort();
            }
        }, 100);

        return () => clearTimeout(timer);
    }, [isLoading])

    if (isLoading) {
        return <p>Loading.....</p>
    }

    if (error) {
        return <p>{JSON.stringify(error)}</p>
    }

    return (
        <div>
            <p>
                {JSON.stringify(data)}
            </p>
        </div>
    )
};

Items returned from fetch calls

There are several items which may be returned when requesting a fetch call.

Term	Definition
Data	The content being fetched from a HTTP resource.
Error	States an issue with the fetch call, made when the data cannot properly load.
isLoading	Checks if the request is being loaded, as well as clearing out prior timeout functions.
abortConsole	Cancels the fetch call.

Usage no npm install needed!