axios-handler is a React/React Native custom hook that simplifies and enhances the use of the Axios library for executing API requests efficiently.
Install using npm:
npm install axios-handler axiosOr using yarn:
yarn add axios-handler axios- Simplifies API request management in React and React Native applications.
- Built-in support for loading and error states.
- Supports dynamic parameters for API queries.
- Provides refresh and reset functionality for easy data manipulation.
Here's an example of how to use axios-handler in a React Native project:
import React, { useEffect } from 'react'
import { ActivityIndicator, Text, Button } from 'react-native'
import { useFetching } from 'axios-handler'
import axios from 'axios'
const Component = () => {
const { fetch, refresh, data, loading, refreshing, error, reset } = useFetching({
query: async props => {
const { id, filters } = props
return await axios.get(`api/v2/example/${id}`, { params: filters })
},
onComplete: response => {
console.log('Response:', response)
},
onError: error => {
console.log('Error:', error)
},
initialLoading: true,
})
useEffect(() => {
fetch({ id: 123, filters: { test: 'test' } })
}, [])
return (
<>
{loading && <ActivityIndicator />}
{refreshing && <ActivityIndicator />}
{error && <Text>Error: {error.message}</Text>}
{data && <Text>Data: {JSON.stringify(data.data)}</Text>}
<Button title="Refresh" onPress={() => refresh({ id: 123, filters: { test: 'test' } })} />
<Button title="Reset" onPress={reset} />
</>
)
}
export default ComponentThe useFetching hook accepts a configuration object with the following parameters:
| Parameter | Type | Description | Required | Default |
|---|---|---|---|---|
query |
(props?: any) => Promise<AxiosResponse<T, D>> |
Function to perform the HTTP request using Axios. | Yes | N/A |
onComplete |
(response: AxiosResponse<T, D>) => void |
Callback on successful request completion. response. | No | N/A |
onError |
(error: AxiosError<E>) => void |
Callback on request failure. object. | No | N/A |
initialLoading |
boolean |
Whether the request starts in a loading state. | No | false |
initialRefreshing |
boolean |
Whether the request starts in a refreshing state. | No | false |
The useFetching hook returns an object with the following properties:
| Property | Type | Description |
|---|---|---|
fetch |
(props?: any) => Promise<void> |
Starts the HTTP request. |
refresh |
(props?: any) => Promise<void> |
Re-triggers the request in a refreshing state. |
data |
AxiosResponse<T, D> | null |
The response data or null if no request has been made. |
loading |
boolean |
Whether the request is loading. |
refreshing |
boolean |
Whether the request is refreshing. |
error |
AxiosError<E> | null |
The error object if the request fails. |
reset |
() => void |
Resets the state to its initial values. |
Here are the type definitions used for the hook:
export type FetchingParams<T, D, E> = {
query: (props?: any) => Promise<AxiosResponse<T, D>>;
onComplete?: (response: AxiosResponse<T, D>) => void;
onError?: (error: AxiosError<E>) => void;
initialLoading?: boolean;
initialRefreshing?: boolean;
};export type FetchingReturn<T, D, E> = {
fetch: (props?: any) => Promise<void>;
refresh: (props?: any) => Promise<void>;
data: AxiosResponse<T, D> | null;
loading: boolean;
refreshing: boolean;
error: AxiosError<E> | null;
reset: () => void;
};We welcome contributions! Here’s how you can help:
- Report issues or request features by opening an issue.
- Submit pull requests to suggest fixes or enhancements.
Before contributing, please ensure your code follows the project's style and passes all tests.
This project is licensed under the ISC License.
