https://github.com/hacknlove/usestorage
react state hook for using browser extension storage
https://github.com/hacknlove/usestorage
Last synced: about 1 year ago
JSON representation
react state hook for using browser extension storage
- Host: GitHub
- URL: https://github.com/hacknlove/usestorage
- Owner: hacknlove
- License: isc
- Created: 2019-07-31T08:16:12.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2019-08-09T13:36:12.000Z (almost 7 years ago)
- Last Synced: 2024-04-27T02:03:30.140Z (about 2 years ago)
- Language: JavaScript
- Size: 10.7 KB
- Stars: 5
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# usestorage
react state hook for using browser extension storage
## Install
```
npm i @hacknlove/usestorage
```
## API
### `useStorage(key, first = null, area = 'sync')`
* `key` **string**: the key to be retrieved
* `first` **any** the initial value to be returned before get the actual one.
* `area` **'sync' or 'local'** the storage to use.
returns `[value, set]` with the value in the storage at `key` and a function to update the key in the storage
### `preStore(keys, area = 'sync'`)
* `key` **array** of the keys to be cached
* `area` the storage to use.
speed up `useStorage` caching the actual values for the first use.
## Example
```javascript
import React from 'react'
import ReactDOM from 'react-dom'
import useStorage, { preStore } from '@hacknlove/usestorage'
preStore(['world']) // optional optimization
function Example () {
const [world, setWorld] = useStorage('world')
return (
Hello {world}
setWorld('earth')}>World's name
)
}
ReactDOM.render(
,
document.querySelector('#root')
)
```