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. |