Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/antidote003/react-api-toolkit
A set of custom React hooks for handling API calls using Axios.
https://github.com/antidote003/react-api-toolkit
api axios javascript npm npm-package package tyoescript
Last synced: about 1 month ago
JSON representation
A set of custom React hooks for handling API calls using Axios.
- Host: GitHub
- URL: https://github.com/antidote003/react-api-toolkit
- Owner: AnTIdoTe003
- Created: 2024-09-09T17:55:50.000Z (3 months ago)
- Default Branch: master
- Last Pushed: 2024-09-10T04:18:53.000Z (3 months ago)
- Last Synced: 2024-10-12T08:04:08.726Z (2 months ago)
- Topics: api, axios, javascript, npm, npm-package, package, tyoescript
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/react-api-toolkit
- Size: 16.6 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Here’s an updated README including the `usePolling` hook:
---
# `react-api-toolkit`
Welcome to `react-api-toolkit`, a versatile and powerful collection of React hooks for handling API requests, mutations, pagination, infinite scrolling, file uploads, polling, and more. Whether you're building a robust application or a simple prototype, `react-api-toolkit` simplifies your data-fetching needs and helps you focus on building great features.
## 🚀 Features
- **`useFetch`**: Fetch data with ease, handle loading and error states, and refetch data when needed.
- **`useMutation`**: Manage API mutations (POST, PUT, DELETE), track loading and error states, and handle success and failure scenarios.
- **`usePagination`**: Simplify paginated data fetching and management.
- **`useInfiniteScroll`**: Effortlessly implement infinite scrolling for your data-driven UIs.
- **`useUpload`**: Handle file uploads with progress tracking and multipart data support.
- **`usePolling`**: Automatically poll an API endpoint at regular intervals.
## 🔗 Installation
Install the package via npm or yarn:
```bash
npm install react-api-toolkit
```
or
```bash
yarn add react-api-toolkit
```
## 📚 Usage
### `useFetch`
Fetch data from an API and handle loading, error, and data states.
```typescript
import { useFetch } from 'react-api-toolkit';
const { data, loading, error, refetch } = useFetch({
url: '/api/data',
token: 'your-token',
onSuccess: (data) => console.log('Data fetched successfully:', data),
onError: (error) => console.error('Error fetching data:', error),
});
if (loading) return
Loading...;
if (error) return Error: {error};
return Data: {JSON.stringify(data)};
```
### `useMutation`
Perform mutations (POST, PUT, DELETE) and handle different states.
```typescript
import { useMutation } from 'react-api-toolkit';
const { data, loading, error, mutate } = useMutation({
method: 'post',
url: '/api/submit',
data: { key: 'value' },
onSuccess: (response) => console.log('Mutation successful:', response),
onError: (error) => console.error('Mutation error:', error),
});
const handleSubmit = async () => {
await mutate();
};
if (loading) return
Loading...;
if (error) return Error: {error};
return Submit;
```
### `usePagination`
Manage paginated data fetching.
```typescript
import { usePagination } from 'react-api-toolkit';
const { data, loading, error, fetchNextPage } = usePagination({
url: '/api/data',
params: { page: 1, size: 10 },
});
return (
{loading && Loading...}
{error && Error: {error}}
{data && (
{data.map(item => - {item.name}
)}
Load More
)}
);
```
### `useInfiniteScroll`
Implement infinite scrolling with ease.
```typescript
import { useInfiniteScroll } from 'react-api-toolkit';
const { data, loading, error, loadMore } = useInfiniteScroll({
url: '/api/infinite',
params: { page: 1, size: 10 },
});
return (
{loading && Loading...}
{error && Error: {error}}
{data && (
{data.map(item => - {item.name}
)}
Load More
)}
);
```
### `useUpload`
Handle file uploads with progress.
```typescript
import { useUpload } from 'react-api-toolkit';
const { progress, error, upload } = useUpload({
url: '/api/upload',
onSuccess: (response) => console.log('Upload successful:', response),
onError: (error) => console.error('Upload error:', error),
});
const handleUpload = (event: React.ChangeEvent) => {
if (event.target.files) {
upload(event.target.files[0]);
}
};
return (
{progress && Upload progress: {progress}%}
{error && Error: {error}}
);
```
### `usePolling`
Poll an API endpoint at regular intervals.
```typescript
import { usePolling } from 'react-api-toolkit';
const { data, loading, error } = usePolling({
url: '/api/polling',
interval: 5000, // Poll every 5 seconds
onSuccess: (data) => console.log('Polling data:', data),
onError: (error) => console.error('Polling error:', error),
});
if (loading) return
Loading...;
if (error) return Error: {error};
return Data: {JSON.stringify(data)};
```
## 🛠️ Development
To build the package:
```bash
npm run build
```
## 📦 Publishing
To publish your package to npm:
1. Ensure you're logged in:
```bash
npm login
```
2. Publish:
```bash
npm publish
```
## 💬 Support
For any issues or questions, please open an issue on [GitHub](https://github.com/AnTIdoTe003/react-api-toolkit).
---
Feel free to adjust any specifics based on your package’s features and your preferred documentation style.