Home

Awesome

use-axios-hooks

axios hooks for common network calls scenarios

npm version JavaScript Style Guide GitHub license Maintenance

Read here about my motivation for developing this library: https://medium.com/@zaingz/how-react-hooks-compares-to-redux-eba43788df46

Features

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>
)
}

Edit practical-sky-tpi6c

API

useAxios(url | config)

Basic hook to make network calls.

Returns [{data, isLoading, error, isCanceled}, cancel]

useAxiosRetry(url | config, options)

Hook to retry network call on error.

Returns [{data, isLoading, error, isCanceled}, cancel]

useAxiosInterval(url | config, interval)

Hook to do repeated network call after an interval (long polling).

Returns [{data, isLoading, error, isCanceled}, cancel]

License

MIT © zaingz


This hook is created using create-react-hook.