Axios Interceptor Hook
npm install axios-interceptor-hooknpm install axios react-toastify axios-interceptor-hook
axios and react-toastify are peer dependencies and needs to be installed explicitly
js
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 (
{isPending && Loading.......
}
{data &&
Object.keys(data).length > 0 &&
data?.map((todo, index) => (
{todo.title}
))}
);
}
export default App;
`
Documentation
$3
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 |
$3
Need to save your auth token as, interceptor will automatically get it.
> localStorage.setItem('authToken', );
$3
Please add env variable into your .env or .env.local file.
> REACT_APP_BASE_URL="https://jsonplaceholder.typicode.com"
$3
| 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` |