https://github.com/kigiri/react-use-idb

React side-effect hook that manages a single indexDB item.
https://github.com/kigiri/react-use-idb

Last synced: about 1 month ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/kigiri/react-use-idb
• Owner: kigiri
• License: mit
• Created: 2018-11-05T21:25:20.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2020-05-11T17:55:39.000Z (over 4 years ago)
• Last Synced: 2024-10-27T07:32:32.176Z (about 2 months ago)
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/react-use-idb
• Size: 11.7 KB
• Stars: 43
• Watchers: 2
• Forks: 6
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• fucking-awesome-react-hooks - `react-use-idb`
• awesome-react-hooks-cn - `react-use-idb`
• awesome-react-hooks - `react-use-idb`
• awesome-react-hooks - `react-use-idb`

README

        
# 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](https://hacks.mozilla.org/2012/03/there-is-no-simple-solution-for-local-storage/)

`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

```jsx

import { useIdb } from 'react-use-idb'

const Demo = () => {

  const [value, setValue] = useIdb('my-key', 'foo')

  return (

    


      
Value: {value}

       setValue('bar')}>bar

       setValue('baz')}>baz

    

  )

}

```


## Reference

```js

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](https://github.com/jakearchibald/idb-keyval)