axios-interceptor-hook

axios-interceptor-hooks

React hooks for axios with built in react-tostify integration. Simple to use with minimum configuration.

Features

• All the axios awesomeness you are familiar with
• Zero configuration, but configurable if needed
• Integrated react-toastify for better toast messages
• Minimize file managment

Installation

npm install axios react-toastify axios-interceptor-hook

axios and react-toastify are peer dependencies and needs to be installed explicitly

Example

import { ToastContainer } from 'react-toastify';
import { useAxiosInterceptor } from 'axios-interceptor-hook';
import { useEffect } from 'react';
import 'react-toastify/dist/ReactToastify.css';

function App() {
  const { data, isPending, apiHandler } = useAxiosInterceptor();
  // with toast message
  const config = {
    method: 'get',
    url: '/todos',
    delay: 4000,
    displayToast: true,
    successMessage: 'Todos data retrieve',
    errorMessage: 'Todos data fetch error',
    toastPosition: 'top-right',
    hideProgressBar: false,
    closeOnClick: true,
    pauseOnHover: true,
    draggable: true,
    theme: 'colored',
  };

  // without toast message
  // const config = {
  //   method: 'get',
  //   url: '/todos',
  //   delay: 4000,
  //   displayToast: false
  // }

  const getTodosData = async () => {
    await apiHandler(config);
  };

  useEffect(() => {
    getTodosData();
  }, []);

  return (
    <div>
      <ToastContainer />
      {isPending && <p>Loading.......</p>}
      {data &&
        Object.keys(data).length > 0 &&
        data?.map((todo, index) => (
          <h6 key={index + 'testing'}>{todo.title}</h6>
        ))}
    </div>
  );
}

export default App;

Documentation

Return

It will return following fields:

Fields	Type	Description
data	Object	It return the response of api (res.data)
isPending	Bool	For loading purpose return true while fetching and return false after completion or failure
apiHandler	Func	Function to give you control over calling when you need just by passing config

For Bearer Token

Need to save your auth token as, interceptor will automatically get it.

localStorage.setItem('authToken', <YOUR TOKEN>);

Environment Variable for Base URL

Please add env variable into your .env or .env.local file.

REACT_APP_BASE_URL="https://jsonplaceholder.typicode.com"

Config Props

Fields	Type	Description
method	string	'get', 'post', 'put', 'delete', 'patch'
url	string	it will be your endpoint
delay	number	default 5000
data	Object	required on post, put, patch requests
successMessage	string	'Any Message'
errorMessage	string	'Any Message'
position	string	'top-right', 'top-left', 'top-center', 'bottom-left', 'bottom-right', 'bottom-center'
hideProgressBar	Bool	true or false
closeOnClick	Bool	true or false
pauseOnHover	Bool	true or false
draggable	Bool	true or false
theme	string	'light','dark','colored'

License

MIT