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.