@amirsohail1/react-super-api
Version:
react-super-api allows you to easily fetch, send, update, and delete data from any database with minimal code. No need to manage useState or useEffect
216 lines (153 loc) • 5.6 kB
Markdown
# React Super API
🚀 **Welcome Developers!**
`react-super-api` allows you to easily fetch, send, update, and delete data from any database with minimal code. No need to manage `useState` or `useEffect`—our library handles everything efficiently using **TanStack Query** under the hood.
⚠️ This library is currently under development, and only basic API operations with optimizations have been added.
## 📦 Installation
Install via npm:
```sh
npm install @amirsohail1/react-super-api
```
Or using Yarn:
```sh
yarn add @amirsohail1/react-super-api
```
## 🔌 Setup
Wrap your application with the `Wrapper` component to initialize the library.
Make sure to wrap your main file (where you render your React app):
```jsx
import { createRoot } from "react-dom/client";
import { Wrapper } from "@amirsohail1/react-super-api";
import App from "./App.jsx";
createRoot(document.getElementById("root")).render(
<Wrapper>
<App />
</Wrapper>
);
```
## 🔥 Usage
### 1️⃣ Fetch Data using `useGetData`
Import the library and use `useGetData`:
```jsx
import { useGetData } from "@amirsohail1/react-super-api";
const { data, isPending, error } = useGetData({
name: "users",
url: "https://jsonplaceholder.typicode.com/users",
});
```
**Parameters:**
- `name` _(required)_: A unique identifier for caching.
- `url` _(required)_: API endpoint for fetching data.
- `options` _(optional)_: An object for additional configurations.
**Returned Values:**
1. `data` → Contains the fetched data.
2. `isPending` → Boolean to check if data is loading.
3. `error` → Contains any errors encountered.
### ⏳ Optional Optimizations
You can pass an `options` object with additional settings:
```jsx
const { data, isPending, error } = useGetData({
name: "users",
url: "https://jsonplaceholder.typicode.com/users",
options: { refetchInterval: 10000, staleTime: 60000, cacheTime: 300000 },
});
```
- **`refetchInterval`** → Auto-fetch data every `X` milliseconds.
- **`staleTime`** → Duration before data is considered stale.
- **`cacheTime`** → How long data remains cached after becoming unused.
### 2️⃣ Send Data using `useSendData`
```jsx
import { useSendData } from "@amirsohail1/react-super-api";
const CreateUser = () => {
// also have mutate
const { mutate, data, isPending, error } = useSendData({
name: "createUser",
url: "https://jsonplaceholder.typicode.com/users",
});
const handleCreate = () => {
// wrap all the data and pass into mutate function
mutate({ name: "John Doe", email: "johndoe@example.com" });
};
return (
<div>
<button onClick={handleCreate} disabled={isPending}>
{isPending ? "Creating..." : "Create User"}
</button>
{error && <p>Error: {error.message}</p>}
{data && <p>User Created: {data.name}</p>}
</div>
);
};
```
### 3️⃣ Update Data using `useUpdateData`
```jsx
import { useUpdateData } from "@amirsohail1/react-super-api";
const UpdateUser = () => {
// also have mutate
const { mutate, data, isPending, error } = useUpdateData({
name: "updateUser",
url: "https://jsonplaceholder.typicode.com/users/1",
});
const handleUpdate = () => {
// wrap all the data and pass into mutate function
mutate({ name: "Jane Doe", email: "janedoe@example.com" });
};
return (
<div>
<button onClick={handleUpdate} disabled={isPending}>
{isPending ? "Updating..." : "Update User"}
</button>
{error && <p>Error: {error.message}</p>}
{data && <p>User Updated: {data.name}</p>}
</div>
);
};
```
### 4️⃣ Delete Data using `useDeleteData`
```jsx
import { useDeleteData } from "@amirsohail1/react-super-api";
const DeleteUser = () => {
// also have mutate
const { mutate, isPending, error } = useDeleteData({
name: "deleteUser",
url: "https://jsonplaceholder.typicode.com/users/1",
});
const handleDelete = () => {
// in case of delete just call the function
mutate();
};
return (
<div>
<button onClick={handleDelete} disabled={isPending}>
{isPending ? "Deleting..." : "Delete User"}
</button>
{error && <p>Error: {error.message}</p>}
</div>
);
};
```
# New Update in version: "1.3.6"
Now when use `useSendData` , `useUpdateData` , `useDeleteData` you should see the promise success or fail massage
Also you can now Get `isError` & `isSuccess` form `useSendData` , `useUpdateData` , `useDeleteData` that return boolean value
## 🎯 Why Use `react-super-api`?
✔ **Minimal Boilerplate** – Fetch, send, update, and delete data in just 1-2 lines of code.
✔ **Optimized Performance** – Uses caching and automatic refetching to minimize API calls.
✔ **No Need for `useState` & `useEffect`** – The library handles state and side effects for you.
✔ **Error Handling Built-in** – Get structured error responses for debugging.
## 📜 License
This project is licensed under the MIT License.
Start coding efficiently with `react-super-api` today! 🚀