use-db
v2.0.0
Published
IndexedDB React hook that mimics useState API supporting optimistic updates
Downloads
224
Maintainers
Readme
use-db
React hook for
IndexedDB
that mimicsuseState
API
Install
npm install use-db
Usage
import useDb from 'use-db'
export default function Todos() {
const [todos, setTodos] = useDb('todos', {
defaultValue: ['buy avocado', 'do 50 push-ups']
})
}
import React, { useState } from 'react'
import useDb from 'use-db'
export default function Todos() {
const [todos, setTodos] = useDb('todos', {
defaultValue: ['buy avocado']
})
const [query, setQuery] = useState('')
function onClick() {
setQuery('')
setTodos([...todos, query])
}
return (
<>
<input value={query} onChange={e => setQuery(e.target.value)} />
<button onClick={onClick}>Create</button>
{todos.map(todo => (
<div>{todo}</div>
))}
</>
)
}
The removeItem()
method will reset the value to its default and will remove the data from the IndexedDB
. It returns to the same state as when the hook was initially created.
import useDb from 'use-db'
export default function Todos() {
const [todos, setTodos, removeItem] = useDb('todos', {
defaultValue: ['buy avocado']
})
function onClick() {
removeItem()
}
}
API
useDb(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
⚠️ Be careful with name conflicts as it is possible to access a property which is already in IndexedDB
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
— SupportslocalStorage
,sessionStorage
, and any otherStorage
compatible API.use-local-storage-state
— Similar to this hook but forlocalStorage
.use-session-storage-state
— Similar to this hook but forsessionStorage
.local-db-storage
— Tiny wrapper aroundIndexedDB
that mimicslocalStorage
API.