{"id":22143432,"url":"https://github.com/hc-oss/use-indexeddb","last_synced_at":"2025-07-26T00:32:57.094Z","repository":{"id":37940659,"uuid":"255737750","full_name":"hc-oss/use-indexeddb","owner":"hc-oss","description":"Lightweight (1KB gzipped) hook w/ promises for easy IndexedDB access in React ⚓","archived":false,"fork":false,"pushed_at":"2024-04-02T15:32:52.000Z","size":4498,"stargazers_count":69,"open_issues_count":17,"forks_count":11,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-11-30T00:38:29.033Z","etag":null,"topics":["hacktoberfest","hooks","indexeddb","lightweight","react","react-hooks","server-side-rendering","ssr-safe","typescript"],"latest_commit_sha":null,"homepage":"https://use-indexeddb.pages.dev","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hc-oss.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-04-14T22:05:28.000Z","updated_at":"2024-09-23T12:14:17.000Z","dependencies_parsed_at":"2024-06-19T01:51:19.518Z","dependency_job_id":"bff33145-9de0-437c-8cdc-9a4180a7ffdc","html_url":"https://github.com/hc-oss/use-indexeddb","commit_stats":null,"previous_names":["harshzalavadiya/use-indexeddb"],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hc-oss%2Fuse-indexeddb","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hc-oss%2Fuse-indexeddb/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hc-oss%2Fuse-indexeddb/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hc-oss%2Fuse-indexeddb/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hc-oss","download_url":"https://codeload.github.com/hc-oss/use-indexeddb/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":227245312,"owners_count":17753241,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hacktoberfest","hooks","indexeddb","lightweight","react","react-hooks","server-side-rendering","ssr-safe","typescript"],"created_at":"2024-12-01T22:10:36.814Z","updated_at":"2024-12-01T22:10:37.344Z","avatar_url":"https://github.com/hc-oss.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# use-indexeddb\n\nLightweight (1KB gzipped) hooks w/ promises for easy IndexedDB access in React ⚓\n\n[![Storybook](https://cdn.jsdelivr.net/gh/storybookjs/brand@master/badge/badge-storybook.svg)](https://use-indexeddb.pages.dev)\n[![GitHub Actions Status](https://github.com/harshzalavadiya/use-indexeddb/workflows/CI/badge.svg)](https://github.com/harshzalavadiya/use-indexeddb/actions)\n[![NPM](https://img.shields.io/npm/v/use-indexeddb.svg)](https://npm.im/use-indexeddb)\n[![gzip](https://badgen.net/bundlephobia/minzip/use-indexeddb@latest)](https://bundlephobia.com/result?p=use-indexeddb@latest)\n\n## 🔧 Installation\n\n```bash\nnpm i use-indexeddb    # npm\nyarn add use-indexeddb # yarn\n```\n\n## 📚 Storybook\n\n[see demo on storybook](https://use-indexeddb.pages.dev/)\n\n## ✨ Features\n\n- 🍃 Lightweight (~3KB gzipped) [no dependencies]\n- 🧠 Automatic modal type inference like `useIndexedDBStore\u003cYourInterface\u003e()`\n- ✅ SSR Safe\n- 🤞 Simple [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) based api\n\n## 📦 Examples\n\n1. [add](#addvalue-key)\n2. [getByID](#getbyidid)\n3. [getAll](#getall)\n4. [getOneByKey](#getonebykeykeypath-value)\n5. [getManyByKey](#getmanybykeykeypath-value)\n6. [update](#updatevalue-key)\n7. [deleteByID](#deletebyidid)\n8. [deleteAll](#deleteall)\n9. [openCursor](#opencursorcursorcallback-keyrange)\n\n### Full Example\n\n```tsx\nimport React from \"react\";\nimport setupIndexedDB, { useIndexedDBStore } from \"use-indexeddb\";\n\n// Database Configuration\nconst idbConfig = {\n  databaseName: \"fruity-db\",\n  version: 1,\n  stores: [\n    {\n      name: \"fruits\",\n      id: { keyPath: \"id\", autoIncrement: true },\n      indices: [\n        { name: \"name\", keyPath: \"name\", options: { unique: false } },\n        { name: \"quantity\", keyPath: \"quantity\" },\n      ],\n    },\n  ],\n};\n\nconst Example = () =\u003e {\n  useEffect(() =\u003e {\n    setupIndexedDB(idbConfig)\n      .then(() =\u003e console.log(\"success\"))\n      .catch(e =\u003e console.error(\"error / unsupported\", e));\n  }, []);\n\n  const { add } = useIndexedDBStore(\"fruits\");\n\n  const insertFruit = () =\u003e {\n    add({ name: \"Mango 🥭\", quantity: 2 }).then(console.log);\n  };\n\n  return \u003cbutton onClick={insertFruit}\u003eInsert\u003c/button\u003e;\n};\n\nexport default Example;\n```\n\n### `add(value, key?)`\n\nInserts given `value` record to selected store, second param is optional key useful if auto-increment is disabled\n\nBy default commit is enabled after each transaction so changes are reflected in indexedDB instantly\n\n```jsx\nimport { useIndexedDBStore } from \"use-indexeddb\";\n\nfunction Example() {\n  const { add } = useIndexedDBStore(\"fruits\");\n\n  const onClick = () =\u003e {\n    add({ name: \"Mango 🥭\", quantity: 2 })\n      .then(d =\u003e console.log(`Added Fruit with ID ${d}`))\n      .catch(console.error);\n  };\n\n  return \u003cbutton onClick={onClick}\u003eAdd\u003c/button\u003e;\n}\n```\n\n### `getByID(id)`\n\nRetrive record by ID\n\n```jsx\nimport { useIndexedDBStore } from \"use-indexeddb\";\n\nfunction Example() {\n  const { getByID } = useIndexedDBStore(\"fruits\");\n\n  const onClick = () =\u003e {\n    getByID(1)\n      .then(console.log)\n      .catch(console.error);\n  };\n\n  return \u003cbutton onClick={onClick}\u003eGet - ID 1\u003c/button\u003e;\n}\n```\n\n### `getAll()`\n\nRetrive all records from provided store\n\n```jsx\nimport { useIndexedDBStore } from \"use-indexeddb\";\n\nfunction Example() {\n  const { getAll } = useIndexedDBStore(\"fruits\");\n\n  const onClick = () =\u003e {\n    getAll()\n      .then(console.log)\n      .catch(console.error);\n  };\n\n  return \u003cbutton onClick={onClick}\u003eGet All Fruits\u003c/button\u003e;\n}\n```\n\n### `getOneByKey(keyPath, value)`\n\nRetrives single record if any row matches with given `keyPath` having `value`\n\n```jsx\nimport { useIndexedDBStore } from \"use-indexeddb\";\n\nfunction Example() {\n  const { getOneByKey } = useIndexedDBStore(\"fruits\");\n\n  const onClick = () =\u003e {\n    getOneByKey(\"quantity\", 2)\n      .then(console.log)\n      .catch(console.error);\n  };\n\n  return \u003cbutton onClick={onClick}\u003eGet Fruit w/ Qty 2\u003c/button\u003e;\n}\n```\n\n### `getManyByKey(keyPath, value)`\n\nRetrives multiple records in form of array if row matches with given `keyPath` having `value`\n\n```jsx\nimport { useIndexedDBStore } from \"use-indexeddb\";\n\nfunction Example() {\n  const { getManyByKey } = useIndexedDBStore(\"fruits\");\n\n  const onClick = () =\u003e {\n    getManyByKey(\"quantity\", 2)\n      .then(console.log)\n      .catch(console.error);\n  };\n\n  return \u003cbutton onClick={onClick}\u003eGet All Fruits w/ Qty 2\u003c/button\u003e;\n}\n```\n\n### `update(value, key?)`\n\nInserts or Updates given `value` in store by `ID`\n\n```jsx\nimport { useIndexedDBStore } from \"use-indexeddb\";\n\nfunction Example() {\n  const { update } = useIndexedDBStore(\"fruits\");\n\n  const onClick = () =\u003e {\n    update({ id: 1, name: \"Strawberry 🍓\", quantity: 20 })\n      .then(console.log)\n      .catch(console.error);\n  };\n\n  return \u003cbutton onClick={onClick}\u003eUpdate Fruid #1 to Strawberry\u003c/button\u003e;\n}\n```\n\n### `deleteByID(id)`\n\nDeletes record by ID\n\n```jsx\nimport { useIndexedDBStore } from \"use-indexeddb\";\n\nfunction Example() {\n  const { deleteByID } = useIndexedDBStore(\"fruits\");\n\n  const onClick = () =\u003e {\n    deleteByID(1)\n      .then(console.log)\n      .catch(console.error);\n  };\n\n  return \u003cbutton onClick={onClick}\u003eDelete Fruit with ID 1\u003c/button\u003e;\n}\n```\n\n### `deleteAll()`\n\nDeletes all records\n\n```jsx\nimport { useIndexedDBStore } from \"use-indexeddb\";\n\nfunction Example() {\n  const { deleteAll } = useIndexedDBStore(\"fruits\");\n\n  const onClick = () =\u003e {\n    deleteAll()\n      .then(console.log)\n      .catch(console.error);\n  };\n\n  return \u003cbutton onClick={onClick}\u003eDelete All Fruits\u003c/button\u003e;\n}\n```\n\n### `openCursor(cursorCallback, keyRange?)`\n\nYou can use `openCursor` to iterate over objects one by one within given `keyRange`\n\n```jsx\nimport { useIndexedDBStore } from \"use-indexeddb\";\n\nfunction Example() {\n  const { openCursor } = useIndexedDBStore(\"fruits\");\n\n  const onClick = () =\u003e {\n    openCursor(e =\u003e {\n      const c = e.target.result;\n      if (c) {\n        console.log(c);\n        c.continue();\n      } else {\n        console.log(\"that's all folks\");\n      }\n    });\n  };\n\n  return \u003cbutton onClick={onClick}\u003eOpen Cursor\u003c/button\u003e;\n}\n```\n\n## 🤠 Credits\n\n- This library takes inspiration from [react-indexed-db](https://github.com/assuncaocharles/react-indexed-db)\n- [TypeScript](https://github.com/microsoft/typescript)\n- [TSDX](https://github.com/jaredpalmer/tsdx)\n\n## 📜 License\n\nMIT \u0026copy; [harshzalavadiya](https://github.com/harshzalavadiya)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhc-oss%2Fuse-indexeddb","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhc-oss%2Fuse-indexeddb","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhc-oss%2Fuse-indexeddb/lists"}