React-axios-provider NPM

react-axios-provider ·🚀

npm version ·

A flexible React Context provider for managing Axios instances throughout your application. This provider allows you to easily share and update an Axios instance across your component tree.

✨ Features

🌀 Provides a shared Axios instance via React Context
🔄 Allows dynamic updates to the Axios instance at runtime
📝 Includes TypeScript support
🔌 Simple integration

Installation 📦

npm install react-axios-provider

📖 Usage

🎯 Basic Setup

First, wrap your application (or a part of it) with the AxiosProvider:

import axios from 'axios';
import { AxiosProvider } from './AxiosProvider';

// Create your Axios instance
const axiosInstance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 5000,
});

function App() {
  return (
    <AxiosProvider instance={axiosInstance}>
      <YourComponents />
    </AxiosProvider>
  );
}

🔨 Using the Axios Instance

Access the Axios instance in your components using the useAxiosContext hook:

import { useAxiosContext } from './AxiosProvider';

function UserProfile() {
  const { axios } = useAxiosContext();
  
  const fetchUser = async () => {
    try {
      const response = await axios.get('/user/profile');
      // Handle response
    } catch (error) {
      // Handle error
    }
  };
  
  return (
    // Your component JSX
  );
}

🔄 Updating the Axios Instance

You can update the Axios instance at any time (e.g., to update authentication headers):

function AuthManager() {
  const { axios, updateAxios } = useAxiosContext();
  
  const updateToken = (newToken: string) => {
    const newInstance = axios.create({
      ...axios.defaults,
      headers: {
        ...axios.defaults.headers,
        Authorization: `Bearer ${newToken}`,
      },
    });
    
    updateAxios(newInstance);
  };
  
  return (
    // Your component JSX
  );
}

📚 API Reference

🔧 AxiosProvider

Main component that provides the Axios context.

Props

Name	Type	Description
instance	AxiosInstance	The initial Axios instance to be provided
children	ReactNode	Child components that will have access to the context

🎣 useAxiosContext

A custom hook that provides access to the Axios context.

Returns

Name	Type	Description
axios	AxiosInstance	The current Axios instance
updateAxios	(instance: AxiosInstance) => void	Function to update the current Axios instance

⚠️ Error Handling

The useAxiosContext hook will throw an error if used outside of an AxiosProvider.

💡 Best Practices

Single Provider: Place the AxiosProvider as high in your component tree as needed, typically at the root of your application.
Instance Updates: When updating the Axios instance, make sure to preserve any necessary default settings from the previous instance.
Error Boundaries: Consider wrapping your components in an error boundary to catch any errors thrown by useAxiosContext.