universe-code-react-indexdb

v1.0.0

Published

a month ago

A lightweight and powerful **IndexedDB utility for React** that helps you cache API data, manage offline storage, and reduce unnecessary network calls — all with a clean and simple API.

0High
0Medium
0Low

faisal-universe

🌌 universe-code (React)

A lightweight and powerful IndexedDB utility for React that helps you cache API data, manage offline storage, and reduce unnecessary network calls — all with a clean and simple API.

✨ Features

⚡ Easy IndexedDB setup
🧠 Built-in API caching with expiry
📦 Simple CRUD operations
🔁 Auto re-fetch when cache expires
💻 Works perfectly with React / Next.js
🛠 Clean and developer-friendly API

📦 Installation

Install the latest version using npm:

npm install universe-code@latest

⚙️ IndexedDB Setup (One Time Only)

You must configure IndexedDB once at the root level of your app.

1️⃣ Create IndexedDB Provider

Create the following file:

📁 lib/provider/idb-provider.tsx

"use client";

import { configureIdb } from "universe-code/react";

export function IdbProvider() {
  configureIdb({
    dbName: "db",
    dbVersion: 1,
    storeName: "store",
  });

  return null;
}

2️⃣ Register Provider in Root Layout

Call the provider once so IndexedDB initializes globally.

import { IdbProvider } from "@/lib/provider/idb-provider";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <IdbProvider />
        {children}
      </body>
    </html>
  );
}

✅ IndexedDB is now created and ready to use.

🚀 Using IndexedDB in Components Import the Hook

import { useIdbStore } from "universe-code/react";

Initialize Store

const idbStore = useIdbStore();

All IndexedDB helper functions are now available inside idbStore.

🔁 API Fetch + Cache with Expiry

Fetch API data and automatically store it in IndexedDB with expiry control.

idbStore
  .getWithExpiry("users", minutesToMs(1), async () => {
    const res = await fetch("https://example.com/api/user", {
      method: "GET",
      headers: {
        "Content-Type": "application/json",
      },
    });

    const data = await res.json();
    return data.data;
  })
  .then(console.log);

Note:

import minutesToMs() from universe-code/core

import { minutesToMs } from "universe-code/core";

🧠 How it works

Calls API only if data is missing or expired
Saves response in IndexedDB
Returns cached data instantly on next call

📥 Get Data from IndexedDB

const data = await idbStore.get("users");
console.log(data);

✏️ Insert / Update Data

idbStore.put({
  id: "users",
  data: {
    name: "Mark",
    country: "USA",
  },
  timestamp: Date.now(),
});

🗑️ Delete a Specific Record

idbStore.remove("users");

🧹 Clear Entire IndexedDB Store

idbStore.clear();

📚 API Reference

| Function | Description | |---------|------------| | get(id) | Retrieve data from IndexedDB | | put(payload) | Insert or update data | | remove(id) | Delete a record | | clear() | Clear all IndexedDB data | | getWithExpiry(id, expiry, callback) | Fetch and cache data with expiry |

✅ Ideal Use Cases

API response caching
Offline-first applications
Performance optimization
Reducing repeated API calls
Storing session or user data