Registry / devops / axios-interceptor-hook

axios-interceptor-hook

library0.2.13jsnpmunverified

React hooks for Axios with built-in react-toastify integration. Version 0.2.13. Active development. Provides a simple hook (useAxiosInterceptor) that returns data, pending state, and an apiHandler function to perform HTTP requests with automatic toast notifications. Requires explicit installation of peer dependencies (axios, react-toastify). Supports bearer token via localStorage and base URL via environment variable (REACT_APP_BASE_URL). Less flexible than alternatives like react-query or swr, but offers minimal configuration for toast integration.

devops

npm install axios-interceptor-hook

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · AXIOS-INTERCEPTOR-

axios-interceptor-hook

devopsjavascriptv0.2.13

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

useAxiosInterceptor

✓ import { useAxiosInterceptor } from 'axios-interceptor-hook'

✗ import useAxiosInterceptor from 'axios-interceptor-hook'

Named export; not default export. Ensure named import syntax.

axios-interceptor-hook

✓ const { useAxiosInterceptor } = require('axios-interceptor-hook')

✗ const useAxiosInterceptor = require('axios-interceptor-hook')

CommonJS requires destructuring because it's a named export.

Basic usage of useAxiosInterceptor with toast integration and GET request.

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(); 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', }; const getTodosData = async () => { await apiHandler(config); }; useEffect(() => { getTodosData(); }, []); return ( <div> <ToastContainer /> {isPending && <p>Loading...</p>} {data && data.map((todo, index) => ( <h6 key={index}>{todo.title}</h6> ))} </div> ); } export default App;

Debug

Known issues

gotchaMake sure REACT_APP_BASE_URL is set in .env or .env.local. Otherwise requests will fail.

fix

Set REACT_APP_BASE_URL in environment file.

affects: >=0.0.0

gotchaBearer token must be stored as 'authToken' in localStorage. Incorrect key will cause 401.

fix

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

affects: >=0.0.0

deprecatedconfig.delay default is 5000 ms; may cause unnecessary delays if not needed.

fix

Set delay to 0 or omit if not needed.

affects: <0.3.0

gotchaToast configuration must be passed in each config object; global configuration is not supported.

fix

Pass toast options in every apiHandler call.

affects: >=0.0.0

gotchaThe hook returns data only after a successful request; initial render may show undefined.

fix

Check data before rendering (e.g., data && ...).

affects: >=0.0.0

Errors

Common errors & fixes

Cannot find module 'axios-interceptor-hook'

Package not installed correctly or missing peer dependencies.

fix

Run: npm install axios react-toastify axios-interceptor-hook

TypeError: Cannot destructure property 'useAxiosInterceptor' of ... as it is undefined.

Using require instead of import with named exports incorrectly.

fix

Use: const { useAxiosInterceptor } = require('axios-interceptor-hook');

Error: Request failed with status code 401

No auth token in localStorage under 'authToken'.

fix

Set localStorage.setItem('authToken', token);

TypeError: apiHandler is not a function

Destructuring returned object incorrectly or hook not called.

fix

Ensure useAxiosInterceptor() returns object with apiHandler.

Upgrade

Version history

0.2.13latest on npm

Audit

Dependencies

reactrequiredPeer dependency (React hooks require React >=16.8)

axiosrequiredPeer dependency, core HTTP client

react-toastifyrequiredPeer dependency for toast notifications

Agent activity

5 hits · last 30 days

node

OpenAI (training)

Resources

githubgit://github.com/sheikhfahad67/axios-interceptor ↗

packageaxios-interceptor-hook ↗

homepagehttps://github.com/sheikhfahad67/axios-interceptor#readme ↗