indexeddb

Framework: react

📦 Installation

Install the latest version using npm:

bash

npm install universe-code@latest

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.

🔁 Store api data in indexdb with time interval.

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",
  },
});

🗑️ 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