@amirsohail1/react-super-api NPM

React Super API

Node Super Logger License Downloads

🚀 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:

npm install @amirsohail1/react-super-api

Or using Yarn:

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):

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:

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:

data → Contains the fetched data.
isPending → Boolean to check if data is loading.
error → Contains any errors encountered.

⏳ Optional Optimizations

You can pass an options object with additional settings:

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`

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`

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`

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.