Axios-handler NPM

axios-handler

axios-handler is a React/React Native custom hook that simplifies and enhances the use of the Axios library for executing API requests efficiently.

Installation

Install using npm:

npm install axios-handler axios

Or using yarn:

yarn add axios-handler axios

Features

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.

Quick Start

Example Code

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 Component

API Documentation

Hook Parameters

The 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`

Return Values

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.

Type Definitions

Here are the type definitions used for the hook:

Parameters

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
}

Return Values

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
}