useIndexedDB

GitHub MDN Docs

Custom hook that provides an interface to the IndexedDB API for client-side storage of significant amounts of structured data.

Installation

npx sse-hooks add use-indexed-db

yarn dlx sse-hooks add use-indexed-db

pnpm dlx sse-hooks add use-indexed-db

deno run -A npm:sse-hooks add use-indexed-db

bunx sse-hooks add use-indexed-db

Usage

example.ts

import { useIndexedDB } from "./{hooks file}";

interface UserProfile {
  name: string;
  age: number;
}

const { setItem, getItem, data } = useIndexedDB<UserProfile>(
  "myAppDB",
  "profiles",
);

const saveProfile = async () => {
  await setItem("user_1", { name: "Alice", age: 30 });
};

API

Parameters

Prop	Default	Type
`options`	`{}`	`UseIndexedDBOptions` Configuration options for the database connection (optional).
`databaseName`	-	`string` The name of the IndexedDB database.
`storeName`	-	`string` The name of the object store within the database.

Returns

Return Value	Default	Type
`clear`	-	`() => Promise<void>` Removes all items from the current object store.
`data`	-	`T \| null` The most recently accessed or modified data item.
`error`	-	`string \| null` The error message if an operation failed, or null if successful.
`getAllKeys`	-	`() => Promise<string[]>` Retrieves all keys currently stored in the object store.
`getItem`	-	`(key: string) => Promise<T \| null>` Retrieves a value from the database by its key.
`loading`	-	`boolean` Indicates if the database is initializing or an operation is in progress.
`removeItem`	-	`(key: string) => Promise<void>` Removes an item from the database by its key.
`setItem`	-	`(key: string, value: T) => Promise<void>` Stores a value in the database under the specified key.

Types Aliases

No specific type aliases defined for this component.

Changelog

90397 — feat: enhance type definitions and documentation for various hooks

c165d — feat: enhance useRoleGuard and useSSR hooks with additional options and documentation

30da4 — feat: add new hooks and their metadata

cf13e — feat: add custom hooks for step navigation, ternary dark mode, timeout, toggle, unmount, and window size

useAutoSave

A robust hook for auto-saving form data with debouncing, race-condition handling, and lifecycle safety. It monitors the `data` state and triggers the `onSave` callback after a specified `delay` of inactivity. It also provides a smart `onChange` handler that adapts to both React Events and direct values.

useLocalStorage

Custom hook that uses the `localStorage API` to persist state across page reloads.