https://github.com/vikramsamak/react-api-utils
A React utility library for making API calls using React Query and Axios, providing context-based configuration and custom hooks for seamless integration.
https://github.com/vikramsamak/react-api-utils
api-calls api-helper async-storage axios context-provider data-fetching http-client react react-library react-query state-management typescript
Last synced: 6 days ago
JSON representation
A React utility library for making API calls using React Query and Axios, providing context-based configuration and custom hooks for seamless integration.
- Host: GitHub
- URL: https://github.com/vikramsamak/react-api-utils
- Owner: vikramsamak
- License: mit
- Created: 2024-12-24T16:54:27.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2025-01-02T04:02:54.000Z (4 months ago)
- Last Synced: 2025-04-10T18:08:03.573Z (20 days ago)
- Topics: api-calls, api-helper, async-storage, axios, context-provider, data-fetching, http-client, react, react-library, react-query, state-management, typescript
- Language: TypeScript
- Homepage: https://react-api-utils-storybook.vercel.app/
- Size: 227 KB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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
```bash
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.
```tsx
import React from 'react';
import { ApiHelperProvider } from 'react-api-utils';
const App = () => (
);
export default App;
```
### Using `useApiHelper`
Leverage the `useApiHelper` hook to perform API requests effortlessly.
```tsx
import { useApiHelper } from 'react-api-utils';
const MyComponent = () => {
const { data, isLoading, isError } = useApiHelper({
url: '/endpoint',
method: 'GET',
queryKey: ['endpoint-data'],
});
if (isLoading) return
Loading...
;
if (isError) return Something went wrong!
;
return
{JSON.stringify(data, null, 2)};
};
```
## 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` | Unique key for React Query's cache management. |
## Contributing
Contributions are welcome! Feel free to submit issues or pull requests.