react-smart-crud

A minimal, smart CRUD helper for React No Redux. No Zustand. No boilerplate.

Designed for API management systems.

✨ Features

• 🧠 Global cache (shared across components)
• ♻️ Automatic re-fetch & sync after mutations
• 🔐 Optional auth token support
• 🔔 Optional toast / notification support
• 🧩 Zero external state library
• ✨ Very small API surface

📦 Installation

npm create vite@latest my-project

cd my-project

npm install react-smart-crud

Optional dependency for notifications:

npm install react-hot-toast

⚙️ One-time Setup (Required)

Create a setup file once in your app.

📄 src/main.jsx

import { setupCrud } from "react-smart-crud";
import toast from "react-hot-toast";

setupCrud({
  baseUrl: "https://api.example.com/",
  getToken: () => localStorage.getItem("token"),
  notify: (type, message) => {
    if (type === "success") toast.success(message);
    if (type === "error") toast.error(message);
  },
});

⚠️ Do this only once in your app.

🧠 useCrud Hook

const { data, loading, error } = useCrud("users");

Returned values

| key | type | description | | ------- | ------- | ------------- | | data | array | cached data | | loading | boolean | request state | | error | any | error info |

✍️ Create (POST)

createItem("users", { name: "John" });

After creation, the library refetches the data automatically to keep your cache in sync.

🔄 Update (PUT)

updateItem("users", 1, { name: "Updated" });

After update, all subscribers automatically get the latest data.

❌ Delete (DELETE)

deleteItem("users", 1);

After deletion, cache and UI are automatically updated.

📂 Example Endpoints

| Action | Endpoint | | ------ | ----------------- | | Fetch | GET /users | | Create | POST /users | | Update | PUT /users/:id | | Delete | DELETE /users/:id |

🧪 Works With

• REST APIs
• Laravel / Express / Django
• Admin dashboards
• School / Business management systems
• Small to mid projects

🧩 Philosophy

Simple cache + smart subscribers No unnecessary abstraction Let React re-render naturally

📄 License

MIT © Tarequl Islam

✅ REAL-WORLD EXAMPLE (Vite + React)

📄 UserPage.jsx

import { useCrud, createItem, deleteItem } from "react-smart-crud";

export default function UserPage() {
  const { data: users, loading, error } = useCrud("users");

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Something went wrong</p>;

  return (
    <div style={{ padding: 20 }}>
      <h2>Users</h2>

      <button
        onClick={() =>
          createItem("users", {
            name: "New User",
            email: "[email protected]",
          })
        }
      >
        ➕ Add User
      </button>

      <ul>
        {users.map((u) => (
          <li key={u.id}>
            {u.name}
            <button onClick={() => deleteItem("users", u.id)}>
              ❌
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
}

🔔 Toast / Notification Integration

You can use:

• react-hot-toast

One-time Setup for Toast

import { setupCrud } from "react-smart-crud";
import toast from "react-hot-toast";

setupCrud({
  baseUrl: "https://your-api.com",

  notify: (type, message) => {
    if (type === "success") toast.success(message);
    if (type === "error") toast.error(message);
  },
});

💡 Best Practices

✔ Keep mutations simple and rely on automatic refetch

✔ Handle toast in component, not inside library

✔ Use useCrud in multiple components — all stay in sync

✅ How it works (Mental Model)

Component
   ↓
useCrud("users")
   ↓
Global store cache
   ↓
API request (once)
   ↓
All subscribers auto update after mutations

👉 Multiple components → same data, no duplicate fetch