Gathering detailed insights and metrics for px-use-persisted-state
Gathering detailed insights and metrics for px-use-persisted-state
npm install px-use-persisted-state
Typescript
Module System
Node Version
NPM Version
60.9
Supply Chain
91.3
Quality
75.7
Maintenance
100
Vulnerability
100
License
Verify real, reachable, and deliverable emails with instant MX records, SMTP checks, and disposable email detection.
Total Downloads
7,420
Last Day
1
Last Week
1
Last Month
35
Last Year
590
Minified
Minified + Gzipped
Latest Version
0.4.7
Package Id
px-use-persisted-state@0.4.7
Unpacked Size
11.22 kB
Size
4.15 kB
File Count
6
NPM Version
6.14.7
Node Version
12.16.1
Cumulative downloads
Total Downloads
Last Day
0%
1
Compared to previous day
Last Week
-50%
1
Compared to previous week
Last Month
-51.4%
35
Compared to previous month
Last Year
-28.4%
590
Compared to previous year
1
1
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
.
💾 Persists the state to localStorage
🖥 Syncs between tabs and/or browser windows
📑 Shares state w/multiple hooks on a page
To use use-persisted-state
, you must use react@16.8.0
or greater which includes Hooks.
1$ npm i use-persisted-state
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.
MIT Licensed
Thanks goes to these wonderful people (emoji key):
Donavon West 🚇 ⚠️ 💡 🤔 🚧 👀 🔧 💻 | Karol Majewski 💻 | Octave Raimbault 💻 |
This project follows the all-contributors specification. Contributions of any kind welcome!
No vulnerabilities found.
No security vulnerabilities found.