{"library":"react-indexed-db","title":"React IndexedDB Hook","description":"react-indexed-db-hook provides a simplified interface for interacting with the browser's IndexedDB, exposed as a React Hook. It is a fork of `react-indexed-db` that primarily focuses on a hook-based API for modern React applications. The current stable version is 2.0.1. While it offers a context-based API, the maintainer explicitly states a lack of future support for it, pushing users towards the `useIndexedDB` hook. The library aims to abstract away the complexities of IndexedDB, providing common CRUD operations (getByID, getAll, add, update, delete) through a concise hook interface, making client-side data persistence more accessible in React projects. Its release cadence appears to be feature-driven rather than time-boxed, with updates addressing bugs or adding minor enhancements. Key differentiators include its explicit focus on a modern React hook API and a lightweight abstraction over raw IndexedDB.","language":"javascript","status":"active","last_verified":"Wed Apr 22","install":{"commands":["npm install react-indexed-db"],"cli":null},"imports":["import { initDB } from 'react-indexed-db-hook';","import { useIndexedDB } from 'react-indexed-db-hook';","import { IndexedDB } from 'react-indexed-db-hook';","import { AccessDB } from 'react-indexed-db-hook';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { useEffect, useState } from 'react';\nimport { initDB, useIndexedDB } from 'react-indexed-db-hook';\n\n// 1. Define your DB configuration\nexport const DBConfig = {\n  name: 'MyTestDB',\n  version: 1,\n  objectStoresMeta: [\n    {\n      store: 'items',\n      storeConfig: { keyPath: 'id', autoIncrement: true },\n      storeSchema: [\n        { name: 'name', keypath: 'name', options: { unique: false } },\n        { name: 'value', keypath: 'value', options: { unique: false } }\n      ]\n    }\n  ]\n};\n\n// 2. Initialize the DB once at the application entry point\ninitDB(DBConfig);\n\ninterface Item {\n  id?: number;\n  name: string;\n  value: string;\n}\n\nconst ItemManager: React.FC = () => {\n  const { add, getAll, getByID, update, deleteRecord } = useIndexedDB<Item>('items');\n  const [items, setItems] = useState<Item[]>([]);\n  const [newItemName, setNewItemName] = useState('');\n  const [newItemValue, setNewItemValue] = useState('');\n  const [selectedItemId, setSelectedItemId] = useState<number | null>(null);\n  const [editItemName, setEditItemName] = useState('');\n  const [editItemValue, setEditItemNameValue] = useState('');\n\n  const refreshItems = async () => {\n    const allItems = await getAll();\n    setItems(allItems);\n  };\n\n  useEffect(() => {\n    refreshItems();\n  }, []);\n\n  const handleAddItem = async () => {\n    await add({ name: newItemName, value: newItemValue });\n    setNewItemName('');\n    setNewItemValue('');\n    refreshItems();\n  };\n\n  const handleEditSelect = async (id: number) => {\n    const item = await getByID(id);\n    if (item) {\n      setSelectedItemId(id);\n      setEditItemName(item.name);\n      setEditItemNameValue(item.value);\n    }\n  };\n\n  const handleUpdateItem = async () => {\n    if (selectedItemId) {\n      await update({ id: selectedItemId, name: editItemName, value: editItemValue });\n      setSelectedItemId(null);\n      setEditItemName('');\n      setEditItemNameValue('');\n      refreshItems();\n    }\n  };\n\n  const handleDeleteItem = async (id: number) => {\n    await deleteRecord(id);\n    refreshItems();\n  };\n\n  return (\n    <div>\n      <h1>Items</h1>\n      <div>\n        <input\n          type=\"text\"\n          placeholder=\"Name\"\n          value={newItemName}\n          onChange={(e) => setNewItemName(e.target.value)}\n        />\n        <input\n          type=\"text\"\n          placeholder=\"Value\"\n          value={newItemValue}\n          onChange={(e) => setNewItemValue(e.target.value)}\n        />\n        <button onClick={handleAddItem}>Add Item</button>\n      </div>\n\n      {selectedItemId && (\n        <div>\n          <h3>Edit Item (ID: {selectedItemId})</h3>\n          <input\n            type=\"text\"\n            value={editItemName}\n            onChange={(e) => setEditItemName(e.target.value)}\n          />\n          <input\n            type=\"text\"\n            value={editItemValue}\n            onChange={(e) => setEditItemNameValue(e.target.value)}\n          />\n          <button onClick={handleUpdateItem}>Update Item</button>\n          <button onClick={() => setSelectedItemId(null)}>Cancel</button>\n        </div>\n      )}\n\n      <ul>\n        {items.map((item) => (\n          <li key={item.id}>\n            {item.name}: {item.value}\n            <button onClick={() => handleEditSelect(item.id!)}>Edit</button>\n            <button onClick={() => handleDeleteItem(item.id!)}>Delete</button>\n          </li>\n        ))}\n      </ul>\n    </div>\n  );\n};\n\nexport default ItemManager;\n","lang":"typescript","description":"This quickstart demonstrates how to initialize the IndexedDB, use the `useIndexedDB` hook to perform CRUD operations (add, get, update, delete) on an 'items' object store, and display the items in a React component.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}