Awesome
use-axios-hooks
axios hooks for common network calls scenarios
Read here about my motivation for developing this library: https://medium.com/@zaingz/how-react-hooks-compares-to-redux-eba43788df46
Features
- Simple and easy to use, no configuration needed.
- Built on top of axios api.
- Ability to retry if api call fails.
- Ability to do api polling.
- Ability to cancel in flight api calls.
- Plays nicely with react component life cycle.
Installation
npm install --save axios use-axios-hooks
Axios is peerDependency
of this lib so make sure you install axios separately.
Usage
import React, { Component } from 'react'
import { useAxios } from 'use-axios-hooks'
const Example = () => {
const [{data, isLoading, error, isCanceled}, cancel] = useAxios('http://my-awesome-api/endpoint')
return (
<div>
{isLoading && 'Loading...'}
{data && JSON.stringify(data)}
{error && JSON.stringify(error)}
<button onClick={() => cancel()}>cancel</button>
</div>
)
}
Retry on error:
import React, { Component } from 'react'
import { useAxiosRetry } from 'use-axios-hooks'
const Example = () => {
const [{data, isLoading, error, isCanceled}, cancel] = useAxiosRetry(
"https://api-will-fail/retry",
{
retryCount: 2,
retryInterval: 2000
}
);
return (
<div>
{isLoading && 'Loading...'}
{data && JSON.stringify(data)}
{error && JSON.stringify(error)}
<button onClick={() => cancel()}>cancel retrying</button>
</div>
)
}
Polling:
import React, { Component } from 'react'
import { useAxiosInterval } from 'use-axios-hooks'
const Example = () => {
const [{data, isLoading, error, isCanceled}, cancel] = useAxiosInterval(
"https://awesome-api/poll",
4000
);
return (
<div>
{isLoading && 'Loading...'}
{data && JSON.stringify(data)}
{error && JSON.stringify(error)}
<button onClick={() => cancel()}>cancel polling</button>
</div>
)
}
API
useAxios(url | config)
Basic hook to make network calls.
url | config
The request url or axios request config object.
Returns
[{data, isLoading, error, isCanceled}, cancel]
data
The response object returned by axios.isLoading
Boolean to indicate if request is started but not completed.error
Error object returned by axios.isCancelled
Boolean to indicate if request is canceled.cancel
Function to cancel pending network call. (It uses axios cancellation api).
useAxiosRetry(url | config, options)
Hook to retry network call on error.
-
url | config
The request url or axios request config object. -
options
Configuration to specify retry options i.e{ retryCount: number, retryInterval: milliseconds }
Returns
[{data, isLoading, error, isCanceled}, cancel]
data
The response object returned by axios.isLoading
Boolean to indicate if request is started but not completed.error
Error object returned by axios.isCancelled
Boolean to indicate if request is canceled.cancel
Function to cancel retying.
useAxiosInterval(url | config, interval)
Hook to do repeated network call after an interval (long polling).
-
url | config
The request url or axios request config object. -
interval
Interval in milliseconds in which network will be made.
Returns
[{data, isLoading, error, isCanceled}, cancel]
-
data
The response object returned by axios. -
isLoading
Boolean to indicate if request is started but not completed. -
error
Error object returned by axios. -
isCancelled
Boolean to indicate if request is canceled. -
cancel
Function to cancel the polling.
License
MIT © zaingz
This hook is created using create-react-hook.