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. |

Contributing

Contributions are welcome! Feel free to submit issues or pull requests.