axios-instance v0.0.18

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>
  );
};