react-api-kit 1.0.1

package/README.md

@@ -0,0 +1,109 @@
+# 🚀 API Client (Axios + TanStack Query)
+
+A lightweight, opinion-free API client built on **Axios** and **TanStack Query**, designed for modern React applications.
+
+✔ No UI dependencies  
+✔ Global success & error hooks  
+✔ Works with any toast library  
+✔ React Query–ready  
+✔ Production-grade architecture
+
+---
+
+## 📦 Installation
+
+```bash
+npm install axios @tanstack/react-query
+```
+
+> **Peer requirements**
+
+- React 18+
+- TanStack Query v5+
+
+## 🔧 Quick Start
+
+### 1️⃣ Setup React Query Provider
+
+```tsx
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+const queryClient = new QueryClient();
+
+export function AppProviders({ children }) {
+  return (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  );
+}
+```
+
+---
+
+### 2️⃣ Configure the API (Required)
+
+Call `setupApi` **once**, ideally at application startup.
+
+```ts
+import { setupApi } from "your-package-name";
+import { toast } from "react-toastify";
+
+setupApi({
+  baseURL: "/api",
+
+  getToken: () => localStorage.getItem("token"),
+
+  toast: {
+    success: (msg) => toast.success(msg),
+    error: (msg) => toast.error(msg),
+  },
+
+  errorMessages: {
+    401: "Session expired",
+    403: "Access denied",
+    500: "Server error",
+  },
+
+  onSuccess: (data) => {
+    console.log("Global success:", data);
+  },
+
+  onError: (error, message) => {
+    console.error("Global error:", message, error);
+  },
+
+  onLogout: () => {
+    localStorage.clear();
+    window.location.href = "/login";
+  },
+});
+```
+
+---
+
+## 🔔 Toast Integration (Optional)
+
+This package **does not ship a toast library**.
+
+You pass your own implementation.
+
+---
+
+## 🪝 Hooks
+
+### `useApiQuery`
+
+```ts
+import { useApiQuery, api } from "react-api-kit";
+
+const fetchUsers = () => api.get("/users").then((res) => res.data);
+```
+
+---
+
+### `useApiMutation`
+
+```ts
+import { useApiMutation, api } from "react-api-kit";
+
+const createUser = (data) => api.post("/users", data).then((res) => res.data);
+```

package/dist/react-api-kit.mjs

@@ -0,0 +1,54 @@
+import i from "axios";
+import { useQuery as c, useQueryClient as p, useMutation as d } from "@tanstack/react-query";
+let o;
+const h = (e) => {
+  o = e;
+}, n = i.create();
+n.interceptors.request.use((e) => {
+  o?.baseURL && (e.baseURL = o.baseURL);
+  const t = o?.getToken?.();
+  return t && (e.headers.Authorization = `Token ${t}`), e;
+});
+n.interceptors.response.use(
+  (e) => (o?.onSuccess?.(e.data), e),
+  (e) => {
+    const t = e?.response?.status, s = {
+      400: "Bad request. Please check your input.",
+      401: "Session expired. Please login again.",
+      403: "You do not have permission to perform this action.",
+      404: "Requested resource not found.",
+      409: "Conflict occurred. Please try again.",
+      422: "Validation error. Please check the form.",
+      500: "Server error. Please try again later."
+    }, r = e?.response?.data?.message || t && o?.errorMessages?.[t] || t && s[t] || e?.message || "Network Error";
+    return o?.toast?.error(r, o.toastOptions), o?.onError?.(e, r), t === 401 && o?.onLogout?.(), Promise.reject(e);
+  }
+);
+const u = {
+  GET: (e, t) => n.get(e, { params: t }).then((s) => s.data),
+  POST: (e, t) => n.post(e, t).then((s) => s.data),
+  PATCH: (e, t) => n.patch(e, t).then((s) => s.data),
+  DELETE: (e) => n.delete(e).then((t) => t.data)
+};
+function m(e, t, s, r, a) {
+  return c({
+    queryKey: e,
+    queryFn: () => u[t](s, r),
+    ...a
+  });
+}
+function g(e, t, s) {
+  const r = p();
+  return d({
+    mutationFn: (a) => u[e](t, a),
+    onSuccess: () => {
+      s && r.invalidateQueries({ queryKey: s });
+    }
+  });
+}
+export {
+  n as api,
+  h as setupApi,
+  g as useApiMutation,
+  m as useApiQuery
+};

package/dist/react-api-kit.umd.js

@@ -0,0 +1 @@
+(function(n,r){typeof exports=="object"&&typeof module<"u"?r(exports,require("axios"),require("@tanstack/react-query")):typeof define=="function"&&define.amd?define(["exports","axios","@tanstack/react-query"],r):(n=typeof globalThis<"u"?globalThis:n||self,r(n.ReactApiKit={},n.axios,n.reactQuery))})(this,(function(n,r,u){"use strict";let o;const d=e=>{o=e},i=r.create();i.interceptors.request.use(e=>{o?.baseURL&&(e.baseURL=o.baseURL);const t=o?.getToken?.();return t&&(e.headers.Authorization=`Token ${t}`),e}),i.interceptors.response.use(e=>(o?.onSuccess?.(e.data),e),e=>{const t=e?.response?.status,s={400:"Bad request. Please check your input.",401:"Session expired. Please login again.",403:"You do not have permission to perform this action.",404:"Requested resource not found.",409:"Conflict occurred. Please try again.",422:"Validation error. Please check the form.",500:"Server error. Please try again later."},a=e?.response?.data?.message||t&&o?.errorMessages?.[t]||t&&s[t]||e?.message||"Network Error";return o?.toast?.error(a,o.toastOptions),o?.onError?.(e,a),t===401&&o?.onLogout?.(),Promise.reject(e)});const p={GET:(e,t)=>i.get(e,{params:t}).then(s=>s.data),POST:(e,t)=>i.post(e,t).then(s=>s.data),PATCH:(e,t)=>i.patch(e,t).then(s=>s.data),DELETE:e=>i.delete(e).then(t=>t.data)};function f(e,t,s,a,c){return u.useQuery({queryKey:e,queryFn:()=>p[t](s,a),...c})}function l(e,t,s){const a=u.useQueryClient();return u.useMutation({mutationFn:c=>p[e](t,c),onSuccess:()=>{s&&a.invalidateQueries({queryKey:s})}})}n.api=i,n.setupApi=d,n.useApiMutation=l,n.useApiQuery=f,Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})}));

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "react-api-kit",
+  "version": "1.0.1",
+  "description": "Reusable Axios + TanStack Query API hooks for React",
+  "license": "ISC",
+  "author": "Ajay kammar",
+  
+  "main": "./dist/react-api-kit.umd.js",
+  "module": "./dist/react-api-kit.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/react-api-kit.mjs",
+      "require": "./dist/react-api-kit.umd.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "@tanstack/react-query": ">=4",
+    "axios": ">=1",
+    "react": ">=17"
+  },
+  "scripts": {
+    "build": "vite build"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^5.1.2",
+    "vite": "^7.3.0"
+  }
+}