{"library":"react-indexed-db-hook","title":"React IndexedDB Hook","description":"The `react-indexed-db-hook` package provides a React hook-based abstraction over the browser's native IndexedDB API. It simplifies common database operations like initializing the database, creating object stores, and performing CRUD operations (add, get, update, delete) within React components. The current stable version is 1.0.14, last published over three years ago, indicating a slower release cadence, likely in maintenance mode rather than active development with new features. It aims to make the powerful, asynchronous, and transactional IndexedDB API more accessible to React developers, offering a more robust client-side storage solution than `localStorage` for larger, structured datasets, and enabling offline-first application capabilities.","language":"javascript","status":"maintenance","last_verified":"Wed Apr 22","install":{"commands":["npm install react-indexed-db-hook"],"cli":null},"imports":["import { initDB } from 'react-indexed-db-hook';","import { useIndexedDB } from 'react-indexed-db-hook';","import type { DBConfig } 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\ninterface User {\n  id?: number;\n  name: string;\n  email: string;\n}\n\n// 1. Define your database configuration\nconst dbConfig = {\n  name: 'MyDatabase',\n  version: 1,\n  objectStoresMeta: [\n    {\n      store: 'users',\n      storeConfig: { keyPath: 'id', autoIncrement: true },\n      storeSchema: [\n        { name: 'name', keypath: 'name', options: { unique: false } },\n        { name: 'email', keypath: 'email', options: { unique: true } },\n      ],\n    },\n  ],\n};\n\n// 2. Initialize the database (typically once in your app's entry point)\ninitDB(dbConfig);\n\nfunction UserForm() {\n  const { add, getAll } = useIndexedDB<User>('users');\n  const [name, setName] = useState('');\n  const [email, setEmail] = useState('');\n  const [users, setUsers] = useState<User[]>([]);\n\n  useEffect(() => {\n    // Fetch all users on component mount\n    getAll().then((data) => {\n      setUsers(data);\n    });\n  }, [getAll]);\n\n  const handleSubmit = async (e: React.FormEvent) => {\n    e.preventDefault();\n    if (!name || !email) return;\n\n    try {\n      const userId = await add({ name, email });\n      alert(`User added with ID: ${userId}`);\n      setName('');\n      setEmail('');\n      // Re-fetch users to update the list\n      getAll().then((data) => setUsers(data));\n    } catch (error) {\n      console.error('Error adding user:', error);\n      alert('Failed to add user. Email might already exist.');\n    }\n  };\n\n  return (\n    <div>\n      <h1>Add New User</h1>\n      <form onSubmit={handleSubmit}>\n        <input\n          type=\"text\"\n          placeholder=\"Name\"\n          value={name}\n          onChange={(e) => setName(e.target.value)}\n        />\n        <input\n          type=\"email\"\n          placeholder=\"Email\"\n          value={email}\n          onChange={(e) => setEmail(e.target.value)}\n        />\n        <button type=\"submit\">Add User</button>\n      </form>\n\n      <h2>Users List</h2>\n      {users.length === 0 ? (\n        <p>No users yet.</p>\n      ) : (\n        <ul>\n          {users.map((user) => (\n            <li key={user.id}>\n              {user.name} ({user.email})\n            </li>\n          ))}\n        </ul>\n      )}\n    </div>\n  );\n}\n\nexport default UserForm;","lang":"typescript","description":"Demonstrates initializing the IndexedDB database, adding a new user to an object store, and retrieving all users using the `useIndexedDB` hook. This covers basic setup and CRUD operations.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}