useApiHook Documentation

useApiHook is a custom React hook designed for simplified API calls and state management, with support for authentication, error handling, custom actions based on response codes, and dynamic data fetching.

Importing

import useApiHook, { AuthProvider } from 'useapicustomhook';

useApiHook Props

| Prop | Type | Description | |--------------------------|-------------------------------------------|----------------------------------------------------| | apiCallingFunction | (...params: any[]) => Promise<any> | Required. Function to call the API. | | apiParameters | any[] | Required. Parameters for the apiCallingFunction. | | apiCustomReturnFunction| (data: any) => any | Optional. Custom function to process API response. | | onError | (error: any) => void | Optional. Function to handle errors. | | runOnTimeOfScreenMount | boolean | Optional. Calls API on component mount. | | initialLoadingState | boolean | Optional. Initial loading state; default is false| | initialData | any | Optional. Initial data for the response. null by default.| | reFetchDependencies | any[] | Optional. Dependencies to re-trigger API calls. | | logoutFunction | () => void | Optional. Logout function for unauthorized responses.|

Return Values

useApiHook returns an object with the following properties:

| Property | Type | Description | |--------------|--------------------|-----------------------------------------------| | data | any | Data returned from the API. | | loading | boolean | Loading state for the API call. | | error | string \| null | Error message, if any. | | refetching | boolean | Indicates if a re-fetch is occurring. | | fetchData | Function | Initiates the API call. | | alterData | Function | Manually alter the current data state. |

Example Usage

const { data, loading, error, fetchData } = useApiHook({   
  apiCallingFunction: fetchDataFromAPI,   
  apiParameters: [param1, param2],   
  onError: handleError,   
  runOnTimeOfScreenMount: true,   
  initialLoadingState: true,   
  reFetchDependencies: [dependency1],   
  logoutFunction: handleLogout 
});

Custom Action Handling in useApiHook

Define custom actions based on HTTP status codes in the AuthProvider. These actions handle specific codes with custom logic.

Custom Action Structure

Each custom action object has:

• codes: An array of status codes.
• action: A function to execute when a response matches any status code in codes.

Example:

const customActions = [   
  { codes: [403], action: handleForbiddenAccess },   
  { codes: [404], action: handleNotFound } 
];

AuthProvider Component

AuthProvider is a context provider for handling logout and custom actions based on response codes.

AuthProvider Props

| Prop | Type | Description | |------------------|--------------------------|--------------------------------------------------| | children | React.ReactNode | Required. Components wrapped by the provider. | | logoutFunction | () => void | Required. Handles unauthorized responses. | | customActions | CustomActions[] | Optional. Custom actions triggered by status codes.|

Usage Example

import { AuthProvider } from 'useapicustomhook';

<AuthProvider logoutFunction={handleLogout} customActions={customActions}>
  <App />
</AuthProvider>

Setting Up AuthContext

AuthContext provides access to logout functionality and custom actions. useApiHook accesses AuthContext to obtain these functions and apply them based on API responses.