Research
Security News
Malicious npm Package Targets Solana Developers and Hijacks Funds
A malicious npm package targets Solana developers, rerouting funds in 2% of transactions to a hardcoded address.
use-local-storage-state
Advanced tools
use-local-storage-state
React hook that persist data in
localStorage
React 18 and above:
npm install use-local-storage-state
⚠️ React 17 and below. For docs, go to the react-17 branch.
npm install use-local-storage-state@17
Window
storage
event and updates changes across browser tabs, windows, and iframe's. Disable with storageSync: false
.localStorage
throws an error and can't store the data. Provides a isPersistent
API to let you notify the user their data isn't currently being stored.import useLocalStorageState from 'use-local-storage-state'
export default function Todos() {
const [todos, setTodos] = useLocalStorageState('todos', {
defaultValue: ['buy avocado', 'do 50 push-ups']
})
}
import React, { useState } from 'react'
import useLocalStorageState from 'use-local-storage-state'
export default function Todos() {
const [todos, setTodos] = useLocalStorageState('todos', {
defaultValue: ['buy avocado']
})
const [query, setQuery] = useState('')
function onClick() {
setQuery('')
setTodos([...todos, query])
}
return (
<>
<input value={query} onChange={e => setQuery(e.target.value)} />
<button onClick={onClick}>Create</button>
{todos.map(todo => (
<div>{todo}</div>
))}
</>
)
}
localStorage
isn't saving the data using the isPersistent
propertyThere are a few cases when localStorage
isn't available. The isPersistent
property tells you if the data is persisted in localStorage
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', {
defaultValue: ['buy avocado']
})
return (
<>
{todos.map(todo => (<div>{todo}</div>))}
{!isPersistent && <span>Changes aren't currently persisted.</span>}
</>
)
}
localStorage
and resetting to the defaultThe removeItem()
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'
export default function Todos() {
const [todos, setTodos, { removeItem }] = useLocalStorageState('todos', {
defaultValue: ['buy avocado']
})
function onClick() {
removeItem()
}
}
If you are hydrating your component (for example, if you are using Next.js), your component might re-render twice. This is behavior specific to React and not to this library. It's caused by the useSyncExternalStore()
hook. There is no workaround. This has been discussed in the issues: https://github.com/astoilkov/use-local-storage-state/issues/56.
If you want to know if you are currently rendering the server value you can use this helper function:
function useIsServerRender() {
return useSyncExternalStore(() => {
return () => {}
}, () => false, () => true)
}
useLocalStorageState(key: string, options?: LocalStorageOptions)
Returns [value, setValue, { removeItem, isPersistent }]
when called. The first two values are the same as useState()
. The third value contains two extra properties:
removeItem()
— calls localStorage.removeItem(key)
and resets the hook to it's default stateisPersistent
— boolean
property that returns false
if localStorage
is throwing an error and the data is stored only in-memorykey
Type: string
The key used when calling localStorage.setItem(key)
and localStorage.getItem(key)
.
⚠️ Be careful with name conflicts as it is possible to access a property which is already in localStorage
that was created from another place in the codebase or in an old version of the application.
options.defaultValue
Type: any
Default: undefined
The default value. You can think of it as the same as useState(defaultValue)
.
options.defaultServerValue
Type: any
Default: undefined
The default value while server-rendering and hydrating. If not set, it will use defaultValue
option instead. Set only if you want it to be different than the client value.
options.storageSync
Type: boolean
Default: true
Setting to false
doesn't subscribe to the Window storage event. If you set to false
, updates won't be synchronized across tabs, windows and iframes.
options.serializer
Type: { stringify, parse }
Default: JSON
JSON does not serialize Date
, Regex
, or BigInt
data. You can pass in superjson or other JSON
-compatible serialization library for more advanced serialization.
use-storage-state
— Supports localStorage
, sessionStorage
, and any other Storage
compatible API.use-session-storage-state
— A clone of this library but for sessionStorage
.use-db
— Similar to this hook but for IndexedDB
.local-db-storage
— Tiny wrapper around IndexedDB
that mimics localStorage
API.FAQs
React hook that persist data in localStorage
The npm package use-local-storage-state receives a total of 94,380 weekly downloads. As such, use-local-storage-state popularity was classified as popular.
We found that use-local-storage-state demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
A malicious npm package targets Solana developers, rerouting funds in 2% of transactions to a hardcoded address.
Security News
Research
Socket researchers have discovered malicious npm packages targeting crypto developers, stealing credentials and wallet data using spyware delivered through typosquats of popular cryptographic libraries.
Security News
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.