Storage
/ API Reference
Storage
/ API Reference

useIndexedStorage

A React hook to manage a value in IndexedDB (new tab).
It uses useStorage and createIndexedStorage under the hood.

The Gist

import { useIndexedStorage } from '@weser/storage'

function Component() {
  const [counter, setCounter, isLoading] = useIndexedStorage(
    'my-database',
    'my-table',
    'counter',
    0
  )

  if (isLoading) {
    return <div>Loading...</div>
  }

  return (
    <div>
      {counter}
      <button onClick={() => setCounter(counter + 1)}>Increment</button>
      <button onClick={() => setCounter(counter - 1)}>Decrement</button>
    </div>
  )
}

Parameters

ParameterTypeDescription
databasestringThe name of the database to use.
tablestringThe name of the table to use.
keystringThe key of the item to set.
initialStateTThe initial value of the item.
configConfigThe configuration object.

Returns

([T, Dispatch<SetStateAction<T>>, boolean]) A tuple where the first element is the value, the second element is a function to update the value and the third element is a boolean indicating if the value is still loading.

On this page