A custom React Hook that provides a multi-instance, multi-tab/browser shared and persistent state.
Installations
npm install use-persisted-stateDeveloper Guide
Typescript
No
Module System
CommonJS
Node Version
14.15.1
NPM Version
6.14.8
Score
98
Supply Chain
93.2
Quality
75.4
Maintenance
100
Vulnerability
100
License
Releases
Unable to fetch releases
Contributors
Unable to fetch Contributors
Languages
JavaScript (100%)
validate.email 🚀
Verify real, reachable, and deliverable emails with instant MX records, SMTP checks, and disposable email detection.
Developer
donavon
Download Statistics
Total Downloads
16,079,906
Last Day
1,948
Last Week
55,574
Last Month
273,825
Last Year
3,454,065
GitHub Statistics
MIT License
1,381 Stars
33 Commits
96 Forks
8 Watchers
24 Branches
7 Contributors
Updated on Mar 13, 2025
Bundle Size
2.03 kB
Minified
888.00 B
Minified + Gzipped
Maintainers
Package Meta Information
Latest Version
0.3.3
Package Id
use-persisted-state@0.3.3
Size
4.78 kB
NPM Version
6.14.8
Node Version
14.15.1
Published on
Nov 19, 2020
Total Downloads
Cumulative downloads
Total Downloads
16,079,906
Last Day
1.7%
1,948
Compared to previous day
Last Week
-19.6%
55,574
Compared to previous week
Last Month
8.5%
273,825
Compared to previous month
Last Year
2.7%
3,454,065
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
1
Peer Dependencies
1
use-persisted-state
A custom React Hook that provides a multi-instance, multi-tab/browser shared and persistent state.
use-persisted-state is not a hook itself, but is a factory that accepts a storage key
and an optional storage provider (default = localStorage) and returns a hook
that you can use as a direct replacement for useState.
Features
???? Persists the state to localStorage
???? Syncs between tabs and/or browser windows
???? Shares state w/multiple hooks on a page
Requirement
To use use-persisted-state, you must use react@16.8.0 or greater which includes Hooks.
Installation
1$ npm i use-persisted-state
Example
Let's take a look at how you can use use-persisted-state.
Here we have an example of a typical up/down counter.
1import { useState } from 'react'; 2 3const useCounter = initialCount => { 4 const [count, setCount] = useState(initialCount); 5 6 return { 7 count, 8 increment: () => setCount(currentCount => currentCount + 1), 9 decrement: () => setCount(currentCount => currentCount - 1), 10 }; 11}; 12 13export default useCounter;
Let's replace the import of react with an import from use-persisted-state.
And we'll call createPersistedState (the factory function).
This will return a useCounterState hook that we can use in place of useState.
The complete code is as follows.
1import createPersistedState from 'use-persisted-state'; 2const useCounterState = createPersistedState('count'); 3 4const useCounter = initialCount => { 5 const [count, setCount] = useCounterState(initialCount); 6 7 return { 8 count, 9 increment: () => setCount(currentCount => currentCount + 1), 10 decrement: () => setCount(currentCount => currentCount - 1), 11 }; 12}; 13 14export default useCounter;
The state is shared with any other hook using the same key, either on the same page, across tabs, or even browser windows.
For example, open two copies of your app in two tabs or even two windows. Any changes to state in one tab will be rendered on the other tab.
You can also close the browser and the next time you run your app, the state will be rendered as it was before you closed your browser.
License
MIT Licensed
Contributors
Thanks goes to these wonderful people (emoji key):
 Donavon West ???? ⚠️ ???? ???? ???? ???? ???? ???? |  Karol Majewski ???? |  Octave Raimbault ???? |  Dennis Morello ???? |  Florent ???? |  Mark Adamson ???? |  Vitor Dino ???? |
This project follows the all-contributors specification. Contributions of any kind welcome!
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
Found 6/23 approved changesets -- score normalized to 2
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 14 are checked with a SAST tool
Reason
46 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
- Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
- Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx
- Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5
- Warn: Project is vulnerable to: GHSA-257v-vj4p-3w2h
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
- Warn: Project is vulnerable to: GHSA-765h-qjxv-5f44
- Warn: Project is vulnerable to: GHSA-f2jv-r9rf-7988
- Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
- Warn: Project is vulnerable to: GHSA-7r28-3m3f-r2pr
- Warn: Project is vulnerable to: GHSA-r8j5-h5cx-65gg
- Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
- Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
- Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
- Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
- Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
- Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
- Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
- Warn: Project is vulnerable to: GHSA-7wpw-2hjm-89gp
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
- Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
- Warn: Project is vulnerable to: GHSA-5fw9-fq32-wv5p
- Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
- Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
- Warn: Project is vulnerable to: GHSA-566m-qj78-rww5
- Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
- Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3
- Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
- Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
- Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc
- Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-w5p7-h5w8-2hfq
- Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
- Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
- Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh
- Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp
Score
2.3
/10
Last Scanned on 2025-03-10
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn MoreOther packages similar to use-persisted-state
@types/use-persisted-state
TypeScript definitions for use-persisted-state
use-hashed-state
Safely store data in localstorage with an unique key of any type, even a component
px-use-persisted-state
A custom React Hook that provides a multi-instance, multi-tab/browser shared and persistent state.
@utilityjs/use-persisted-state
A React hook that provides a SSR-friendly multi-tab persistent state.