UseIDB

A package that helps you read and write data to IndexedDB easily in React. A React hook and render-prop component provided.

This package uses idb under the hood.

Code example

React hook

import {
  useIDB //React hook
} from '@blackblock/use-idb'

//...
//In your React component
const [data, setData] = useIDB({
  database: 'app',
  objectStore: 'test',
  key: 'hello',
  defaultValue: 'foo' //This value is optional
})

useEffect(() => {
  setData('world')
}, [])
//...

Render prop component

import {
  IDB //Render prop component
} from '@blackblock/use-idb'

const exampleComponent = () => (
  <IDB idbSetting={{
    database: 'app',
    objectStore: 'mainStorage',
    key: 'hello',
    defaultValue: 'world'
  }}>
  {([data, setData]) => <input value={data} onChange={setData}>}
  </IDB>
)

Installation

NPM

npm i @blackblock/use-idb

Yarn

yarn add @blackblock/use-idb