axios-interceptor-hook v0.2.13

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:

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

License

MIT