React hook that persist data in local storage
$ npm install use-local-storage-state
Few other libraries also try to abstract the usage of localStorage into a hook. Here are the reasons why you would consider this one:
- Uses
JSON.parse()
andJSON.stringify()
to support non string values. - SSR. Supports server-side rendering.
- Well tested. 100% coverage.
- Handles edge cases – example.
- Subscribes to the Window
storage
event which tracks changes across browser tabs and iframe's.
import useLocalStorageState from 'use-local-storage-state'
const [todos, setTodos] = useLocalStorageState('todos', [
'buy milk',
'do 50 push-ups'
])
import React, { useState } from 'react'
import useLocalStorageState from 'use-local-storage-state'
export default function Todos() {
const [query, setQuery] = useState('')
const [todos, setTodos] = useLocalStorageState('todos', ['buy milk'])
function onClick() {
setTodos([...todos, query])
}
return (
<>
<input value={query} onChange={e => setQuery(e.target.value)} />
<button onClick={onClick}>Create</button>
{todos.map(todo => (<div>{todo}</div>))}
</>
)
}
// store.ts
import { createLocalStorageStateHook } from 'use-local-storage-state'
const useTodos = createLocalStorageStateHook('todos', [
'buy milk',
'do 50 push-ups'
])
export default useTodos
// Todos.ts
import useTodos from '../store'
function Todos() {
const [todos, setTodos] = useTodos()
}
// Popup.ts
import useTodos from '../store'
function Popup() {
const [todos, setTodos] = useTodos()
}
There are a few cases when localStorage
isn't available. The isPersistent
property tells you if the data is persisted in local storage or in-memory. Useful when you want to notify the user that their data won't be persisted.
import React, { useState } from 'react'
import useLocalStorageState from 'use-local-storage-state'
export default function Todos() {
const [todos, setTodos, isPersistent] = useLocalStorageState('todos', ['buy milk'])
return (
<>
{todos.map(todo => (<div>{todo}</div>))}
{!isPersistent && <span>Changes aren't currently persisted.</span>}
</>
)
}
The setTodos.reset()
method will reset the value to its default and will remove the key from the localStorage
. It returns to the same state as when the hook was initially created.
import useLocalStorageState from 'use-local-storage-state'
const [todos, setTodos] = useLocalStorageState('todos', [
'buy milk',
'do 50 push-ups'
])
setTodos.reset()
Returns [value, setValue, isPersistent]
. The first two are the same as useState()
. The third(isPersistent
) determines if the data is persisted in localStorage
or in-memory – example.
Type: string
The key used when calling localStorage.setItem(key)
and localStorage.getItem(key)
.
localStorage
that was created from another place in the codebase or in an old version of the application.
Type: any
Default: undefined
The initial value of the data. The same as useState(defaultValue)
property.
Returns a hook to be used in multiple places – example.
Type: string
The key used when calling localStorage.setItem(key)
and localStorage.getItem(key)
.
localStorage
that was created from another place in the codebase or in an old version of the application.
Type: any
Default: undefined
The initial value of the data. The same as useState(defaultValue)
property.