use-idb-keyval

This is a React hook to help you use IndexedDB.

Usage no npm install needed!

<script type="module">
  import useIdbKeyval from 'https://cdn.skypack.dev/use-idb-keyval';
</script>

README

use-idb-keyval

This is a React hook to help you use IndexedDB.

Usage

import useIdb from "use-idb-keyval";

const Demo = () => {
  const [value, setValue, resetValue] = useIdb("count", 0);

  return (
    <>
      <p>Count: {value}.</p>
      <button onClick={() => setValue(previousValue => previousValue + 1)}>Increment</button>
      <button onClick={resetValue}>Reset</button>
    </>
  );
};

When using the setter function, you can either pass a new value or a function that takes the previous value.

API

useIdb(key);
useIdb(key, initialValue);
useIdb(key, initialValue, (inititalValue) => { doSomething(initialValue});
  • keyindexDB item key to register
  • initialValue — initial value to set, if value in the indexDB item is empty.
  • You can pass a function as the third parameter to do a computation with the initial value.

Inspired by idb-keyval

Buy Me A Coffee