use-db-storage

IndexedDB React hook that mimics useState API supporting optimistic updates

Install

npm install use-db-storage

Usage

import useDbStorage from 'use-db-storage'

export default function Todos() {
    const [todos, setTodos] = useDbStorage('todos', {
        defaultValue: ['buy avocado', 'do 50 push-ups']
    })
}

API

useDbStorage(key: string, options?: StorageStateOptions)

Returns [value, setValue, removeItem] when called. The first two values are the same as useState(). The third value calls IDBObjectStore.delete() and removes the data from the db.

key

Type: string

The key used when calling localStorage.setItem(key) and localStorage.getItem(key).

⚠️ Be careful with name conflicts as it is possible to access a property which is already in localStorage that was created from another place in the codebase or in an old version of the application.

options.defaultValue

Type: any

Default: undefined

The default value. You can think of it as the same as useState(defaultValue).

options.optimistic

Type: boolean

Default: true

IndexedDB is async. When optimistic is enabled, calling setState will synchronously/immediately update the state and it will roll back the state if adding the data to the database fails. You can disable by setting optimistic: false.

Related

• use-storage-state — Supports localStorage, sessionStorage, and any other Storage compatible API.
• use-local-storage-state — Similar to this hook but for localStorage.
• use-session-storage-state — Similar to this hook but for sessionStorage.
• local-db-storage — Tiny wrapper around IndexedDB that mimics localStorage API.