react-use-idb

react-use-idb (useIdb)

React side-effect hook that manages a single indexDB item.

A drop-in remplacement over useLocalStorage.

Why ?

LocalStorage is synchronous and as such, has performances issues

LocalStorage is also limited, only storing strings and does not provide a default mechanisme for serializing / deserializing your data.

Instead, we can rely on indexDB for structural cloning.

Usage

import { useIdb } from 'react-use-idb'
 
const Demo = () => {
  const [value, setValue] = useIdb('my-key', 'foo')
 
  return (
    <div>
      <div>Value: {value}</div>
      <button onClick={() => setValue('bar')}>bar</button>
      <button onClick={() => setValue('baz')}>baz</button>
    </div>
  )
}

Reference

useIdb(key)
useIdb(key, initialValue)

• key — indexDB item key to manage.
• initialValue — initial value to set, if value in the indexDB item is empty.

Inspired by idb-keyval