mirror of
https://github.com/kremalicious/asi-calculator.git
synced 2024-12-23 01:39:40 +01:00
37 lines
791 B
TypeScript
37 lines
791 B
TypeScript
|
'use client'
|
||
|
|
||
|
import { useState, useEffect, Dispatch, SetStateAction } from 'react'
|
||
|
|
||
|
function parse(value: string) {
|
||
|
try {
|
||
|
return JSON.parse(value)
|
||
|
} catch {
|
||
|
return value
|
||
|
}
|
||
|
}
|
||
|
|
||
|
export function usePersistentState<T>(
|
||
|
key: string,
|
||
|
initialState?: T | (() => T)
|
||
|
): [T, Dispatch<SetStateAction<T>>] {
|
||
|
const [state, setState] = useState<T>(initialState as T)
|
||
|
|
||
|
function changeValue(state: SetStateAction<T>) {
|
||
|
setState(state)
|
||
|
localStorage.setItem(key, JSON.stringify(state))
|
||
|
}
|
||
|
|
||
|
useEffect(() => {
|
||
|
const stored = localStorage.getItem(key)
|
||
|
|
||
|
if (!stored) {
|
||
|
setState(initialState as T)
|
||
|
localStorage.setItem(key, JSON.stringify(initialState))
|
||
|
} else {
|
||
|
setState(parse(stored))
|
||
|
}
|
||
|
}, [initialState, key])
|
||
|
|
||
|
return [state, changeValue]
|
||
|
}
|