Use-axios-hooks NPM

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.