Lightweight (1KB gzipped) hooks w/ promises for easy IndexedDB access in React ⚓
npm install use-indexeddbLightweight (1KB gzipped) hooks w/ promises for easy IndexedDB access in React ⚓




``bash`
npm i use-indexeddb # npm
yarn add use-indexeddb # yarn
- 🍃 Lightweight (~3KB gzipped) [no dependencies]
- 🧠 Automatic modal type inference like useIndexedDBStore
- ✅ SSR Safe
- 🤞 Simple Promise based api
1. add
2. getByID
3. getAll
4. getOneByKey
5. getManyByKey
6. update
7. deleteByID
8. deleteAll
9. openCursor
`tsx
import React from "react";
import setupIndexedDB, { useIndexedDBStore } from "use-indexeddb";
// Database Configuration
const idbConfig = {
databaseName: "fruity-db",
version: 1,
stores: [
{
name: "fruits",
id: { keyPath: "id", autoIncrement: true },
indices: [
{ name: "name", keyPath: "name", options: { unique: false } },
{ name: "quantity", keyPath: "quantity" },
],
},
],
};
const Example = () => {
useEffect(() => {
setupIndexedDB(idbConfig)
.then(() => console.log("success"))
.catch(e => console.error("error / unsupported", e));
}, []);
const { add } = useIndexedDBStore("fruits");
const insertFruit = () => {
add({ name: "Mango 🥭", quantity: 2 }).then(console.log);
};
return ;
};
export default Example;
`
Inserts given value record to selected store, second param is optional key useful if auto-increment is disabled
By default commit is enabled after each transaction so changes are reflected in indexedDB instantly
`jsx
import { useIndexedDBStore } from "use-indexeddb";
function Example() {
const { add } = useIndexedDBStore("fruits");
const onClick = () => {
add({ name: "Mango 🥭", quantity: 2 })
.then(d => console.log(Added Fruit with ID ${d}))
.catch(console.error);
};
return ;
}
`
Retrive record by ID
`jsx
import { useIndexedDBStore } from "use-indexeddb";
function Example() {
const { getByID } = useIndexedDBStore("fruits");
const onClick = () => {
getByID(1)
.then(console.log)
.catch(console.error);
};
return ;
}
`
Retrive all records from provided store
`jsx
import { useIndexedDBStore } from "use-indexeddb";
function Example() {
const { getAll } = useIndexedDBStore("fruits");
const onClick = () => {
getAll()
.then(console.log)
.catch(console.error);
};
return ;
}
`
Retrives single record if any row matches with given keyPath having value
`jsx
import { useIndexedDBStore } from "use-indexeddb";
function Example() {
const { getOneByKey } = useIndexedDBStore("fruits");
const onClick = () => {
getOneByKey("quantity", 2)
.then(console.log)
.catch(console.error);
};
return ;
}
`
Retrives multiple records in form of array if row matches with given keyPath having value
`jsx
import { useIndexedDBStore } from "use-indexeddb";
function Example() {
const { getManyByKey } = useIndexedDBStore("fruits");
const onClick = () => {
getManyByKey("quantity", 2)
.then(console.log)
.catch(console.error);
};
return ;
}
`
Inserts or Updates given value in store by ID
`jsx
import { useIndexedDBStore } from "use-indexeddb";
function Example() {
const { update } = useIndexedDBStore("fruits");
const onClick = () => {
update({ id: 1, name: "Strawberry 🍓", quantity: 20 })
.then(console.log)
.catch(console.error);
};
return ;
}
`
Deletes record by ID
`jsx
import { useIndexedDBStore } from "use-indexeddb";
function Example() {
const { deleteByID } = useIndexedDBStore("fruits");
const onClick = () => {
deleteByID(1)
.then(console.log)
.catch(console.error);
};
return ;
}
`
Deletes all records
`jsx
import { useIndexedDBStore } from "use-indexeddb";
function Example() {
const { deleteAll } = useIndexedDBStore("fruits");
const onClick = () => {
deleteAll()
.then(console.log)
.catch(console.error);
};
return ;
}
`
You can use openCursor to iterate over objects one by one within given keyRange
`jsx
import { useIndexedDBStore } from "use-indexeddb";
function Example() {
const { openCursor } = useIndexedDBStore("fruits");
const onClick = () => {
openCursor(e => {
const c = e.target.result;
if (c) {
console.log(c);
c.continue();
} else {
console.log("that's all folks");
}
});
};
return ;
}
``
- This library takes inspiration from react-indexed-db
- TypeScript
- TSDX
MIT © harshzalavadiya