React-api-utils NPM

React API Utils

A utility library for simplifying API requests in React applications. Built on top of React Query and Axios, it provides a seamless way to manage API calls and caching with an intuitive context-based setup.

Features

🌐 Axios Integration: Customize API calls with ease.
⚡ React Query: Automatic caching, refetching, and stale data management.
📦 Async Storage Support: Persisted caching for React Native or browser-based environments.
🛠️ TypeScript Ready: Fully typed for better developer experience.

Installation

npm install react-api-utils
# or
yarn add react-api-utils

Usage

Setup Provider

Wrap your application with the ApiHelperProvider to set up the context and configuration.

import React from 'react';
import { ApiHelperProvider } from 'react-api-utils';

const App = () => (
  <ApiHelperProvider baseURL="https://api.example.com">
    <YourApp />
  </ApiHelperProvider>
);

export default App;

Using `useApiHelper`

Leverage the useApiHelper hook to perform API requests effortlessly.

import { useApiHelper } from 'react-api-utils';

const MyComponent = () => {
  const { data, isLoading, isError } = useApiHelper({
    url: '/endpoint',
    method: 'GET',
    queryKey: ['endpoint-data'],
  });

  if (isLoading) return <p>Loading...</p>;
  if (isError) return <p>Something went wrong!</p>;

  return <pre>{JSON.stringify(data, null, 2)}</pre>;
};

API

`ApiHelperProvider`

Prop	Type	Default	Description
`baseURL`	`string`	`undefined`	Base URL for all Axios requests.
`axiosConfig`	`AxiosRequestConfig`	`{}`	Custom Axios configuration.
`queryClientConfig`	`QueryClientConfig`	`{}`	React Query client configuration.

`useApiHelper`

Option	Type	Description
`url`	`string`	API endpoint to fetch data from.
`method`	`'GET' , 'POST' , 'PUT' , 'DELETE'`	HTTP method for the request.
`queryKey`	`Array<string>`	Unique key for React Query's cache management.