use-indexeddb

Lightweight (1KB gzipped) hooks w/ promises for easy IndexedDB access in React ⚓


🔧 Installation

``bash
npm i use-indexeddb # npm
yarn add use-indexeddb # yarn
`

📚 Storybook

see demo on storybook

✨ Features

- 🍃 Lightweight (~3KB gzipped) [no dependencies]
- 🧠 Automatic modal type inference like useIndexedDBStore()
- ✅ SSR Safe
- 🤞 Simple Promise based api

📦 Examples

1. add
2. getByID
3. getAll
4. getOneByKey
5. getManyByKey
6. update
7. deleteByID
8. deleteAll
9. openCursor

$3

`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 Insert;
};

export default Example;
`

$3

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 Add;
}
`

$3

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 Get - ID 1;
}
`

$3

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 Get All Fruits;
}
`

$3

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 Get Fruit w/ Qty 2;
}
`

$3

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 Get All Fruits w/ Qty 2;
}
`

$3

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 Update Fruid #1 to Strawberry;
}
`

$3

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 Delete Fruit with ID 1;
}
`

$3

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 Delete All Fruits;
}
`

$3

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 Open Cursor;
}
``

🤠 Credits

- This library takes inspiration from react-indexed-db
- TypeScript
- TSDX

📜 License

MIT © harshzalavadiya