axios-instance
v0.0.18
Published
A custom hook package for handling API calls in React applications.
Downloads
26
Maintainers
Readme
axios-instance Hook
axios-instance
is a custom React hook that simplifies making API calls using Axios. It handles API requests and responses, loading states, errors, and optional token authentication. The hook is suitable for handling various RESTful HTTP methods like GET, POST, PUT, and DELETE.
Installation
Install the axios-instance
package using npm:
npm install axios-instance
Usage
To use the useAxios hook in your React components, follow these steps:
1. Import the useAxios hook in your component:
```bash
import { UseAxios } from 'axios-instance';
1.Call the UseAxios hook with the desired API parameters:
```bash
const YourComponent = () => {
const { data, loading, error } = UseAxios(
method, // "GET", "POST", "PUT", or "DELETE"
url, // API endpoint URL
headers, // Optional: Custom headers for the request
queryParams, // Optional: Query parameters as an object
payload, // Optional: Request payload for "POST" and "PUT" methods
withRefresh, // Optional: Boolean to enable token refresh mechanism on 401 errors
tokenPrefix // Optional: Token prefix for authentication (default: "Bearer")
);
// Your component logic based on the API response...
};
1. Replace the placeholders (method, url, headers, etc.) with the appropriate values for your API call.
2. Use the data, loading, and error variables in your component to handle the API response and loading/error states.
Example
Here's an example of how you can use the useAxios hook to fetch data from a sample API:
import { useAxios } from 'use-axios-hook';
const SampleComponent = () => {
const { data, loading, error } = useAxios("GET", "https://jsonplaceholder.typicode.com/posts");
if (loading) {
return <div>Loading...</div>;
}
if (error) {
return <div>Error: {error.message}</div>;
}
if (!data) {
return <div>No data available.</div>;
}
// Render your component with the fetched data
return (
<div>
{data.map((item: any) => (
<div key={item.id}>{item.title}</div>
))}
</div>
);
};