A collection of useful javascript utility Classes, Functions, and React Hooks.
Installations
npm install @utilityjs/use-persisted-state
Developer Guide
Typescript
Yes
Module System
CommonJS
Node Version
17.0.1
NPM Version
8.3.1
Score
69.8
Supply Chain
98.1
Quality
75.4
Maintenance
100
Vulnerability
100
License
Releases
Unable to fetch releases
Contributors
Unable to fetch Contributors
Languages
TypeScript (94.51%)
JavaScript (5.49%)
validate.email 🚀
Verify real, reachable, and deliverable emails with instant MX records, SMTP checks, and disposable email detection.
Developer
mimshins
Download Statistics
Total Downloads
3,975
Last Day
3
Last Week
7
Last Month
79
Last Year
1,768
GitHub Statistics
MIT License
27 Stars
129 Commits
3 Forks
1 Watchers
1 Branches
2 Contributors
Updated on Feb 11, 2025
Bundle Size
3.16 kB
Minified
1.33 kB
Minified + Gzipped
Package Meta Information
Latest Version
1.1.3
Package Id
@utilityjs/use-persisted-state@1.1.3
Unpacked Size
16.48 kB
Size
3.46 kB
File Count
8
NPM Version
8.3.1
Node Version
17.0.1
Total Downloads
Cumulative downloads
Total Downloads
3,975
Last Day
200%
3
Compared to previous day
Last Week
-72%
7
Compared to previous week
Last Month
-19.4%
79
Compared to previous month
Last Year
80.2%
1,768
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Peer Dependencies
1
usePersistedState
A React hook that provides a SSR-friendly multi-tab persistent state.
(also supports multiple instances with the same key)
1npm i @utilityjs/use-persisted-state | yarn add @utilityjs/use-persisted-state
Usage
1const App: React.FC = () => { 2 const [state, setState] = usePersistedState(0, { name: "count" }); 3 4 return ( 5 <div className="app"> 6 <button onClick={() => void setState(v => v + 1)}>Increase</button> 7 <div>{state}</div> 8 </div> 9 ); 10};
API
usePersistedState(initialState, persistOptions)
1type StorageValue<T> = { 2 state: T; 3}; 4 5interface PersistOptions<T> { 6 /** Name of the storage (must be unique) */ 7 name: string; 8 /** 9 * A function returning a storage. 10 * The storage must fit `window.localStorage`'s api. 11 * 12 * @default () => localStorage 13 */ 14 getStorage?: () => Storage | null; 15 /** 16 * Use a custom serializer. 17 * The returned string will be stored in the storage. 18 * 19 * @default JSON.stringify 20 */ 21 serializer?: (state: StorageValue<T>) => string; 22 /** 23 * Use a custom deserializer. 24 * Must return an object matching StorageValue<State> 25 * 26 * @param str The storage's current value. 27 * @default JSON.parse 28 */ 29 deserializer?: (str: string) => StorageValue<T>; 30} 31 32declare const usePersistedState: <T>( 33 initialState: T, 34 options: PersistOptions<T> 35) => [T, React.Dispatch<React.SetStateAction<T>>];
initialState
The initial value of the state.
persistOptions
The options to adjust the persistence behavior.
persistOptions.name
The name of the storage (must be unique).
persistOptions.getStorage
default: () => localStorage
A function returning a storage. The storage must fit window.localStorage
's api.
persistOptions.serializer
default: JSON.stringify
A custom serializer. The returned string will be stored in the storage.
persistOptions.deserializer
default: JSON.parse
A custom deserializer. Must return an object matching StorageValue<State>

No vulnerabilities found.

No security vulnerabilities found.