Re-Published
Hi,
Before that I have published my first NPM package which is: axios-interceptor-hook
Problems
- Build on JavaScript, difficult for user to know about props because there is no suggestions.
- There is no way to call multipart/form-data content-type.
What's new
- Developed with typescript.
- separate hook for Application/json, and multipart/form-data.
- You can use Types for the configurations. (ApiConfig).
Interceptors
Axios interceptors are the methods which are used for each call request and response transformation using axios. Interceptors helps to transform your request before calling api request and when it gets response from the api. It's just like working as middleware.
Configuration
You need to install npm package axios-hook-typescript
Github Repo: (https://github.com/sheikhfahad67/axios-hook-typescript)
Run the command on your terminal.
npm install axios react-toastify axios-hook-typescript
axios-hook-typescript
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-hook-typescript
axios
andreact-toastify
are peer dependencies and needs to be installed explicitly
Example
import { useEffect, useRef } from 'react';
import {
ApiConfig,
useJsonApiInterceptor,
useMultipartInterceptor,
} from 'axios-hook-typescript';
import { ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import './App.css';
interface todosObject {
userId: number;
id: number;
title: string;
completed: boolean;
}
const App = () => {
const { apiHandler: jsonApiHandler, data: jsonData } =
useJsonApiInterceptor();
const { apiHandler: multipartApiHandler } = useMultipartInterceptor();
const inputRef = useRef(null);
const getTodos = async () => {
const config: ApiConfig = {
url: 'https://jsonplaceholder.typicode.com/todos',
method: 'GET',
displayToast: true,
successMessage: 'Fetch all todos',
theme: 'colored',
};
await jsonApiHandler(config);
};
useEffect(() => {
getTodos();
}, []);
const handleFileChange = async (e: any) => {
const { files: newFiles } = e.target;
const formData = new FormData();
formData.append('image', newFiles[0]);
const config: ApiConfig = {
url: 'http://localhost:8000/files',
data: formData,
method: 'POST',
displayToast: true,
successMessage: 'File uploaded successfully',
};
await multipartApiHandler(config);
};
return (
<div className='App'>
<ToastContainer />
<h1>Axios Interceptor Examples</h1>
<input
id='file'
type='file'
multiple
ref={inputRef}
onChange={handleFileChange}
/>
<button className='submit-btn' type='submit'>
Upload
</button>
<div style={{ marginTop: '50px', border: '1px solid green' }}>
{jsonData &&
Object.keys(jsonData).length > 0 &&
jsonData.map((todo: todosObject) => (
<h1 key={todo.id}>{todo?.title}</h1>
))}
</div>
</div>
);
};
export default App;
Documentation
Hooks
useJsonApiInterceptor
- for content-type: application/json.
useMultipartInterceptor
- for content-type: multipart/form-data
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
Types
ApiConfig
- for api configurations
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' |
position | string | 'top-right', 'top-left', 'top-center', 'bottom-left', 'bottom-right', 'bottom-center' |
hideProgressBar | Bool |
true or false
|
theme | string | 'light','dark','colored' |
License
MIT
Top comments (0)