blob: face65bb268748bea676a9397c3bca36e7e6cc44 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
|
import { useState, useCallback, useRef } from "react";
import { SUPPORTED } from "./utils";
type Dispatch<A> = (value: A) => void;
type SetStateAction<S> = S | ((prevState: S) => S);
const useLocalState = <S>(
key: string,
defaultValue: S | (() => S)
): [S, Dispatch<SetStateAction<S>>, () => void] => {
const [value, setValue] = useState<S>(() => {
const isCallable = (value: unknown): value is () => S =>
typeof value === "function";
const toStore = isCallable(defaultValue) ? defaultValue() : defaultValue;
if (!SUPPORTED) return toStore;
const item = window.localStorage.getItem(key);
try {
return item ? JSON.parse(item) : toStore;
} catch (error) {
return toStore;
}
});
const lastValue = useRef(value);
lastValue.current = value;
const setLocalStateValue = useCallback(
(newValue: SetStateAction<S>) => {
const isCallable = (value: unknown): value is (prevState: S) => S =>
typeof value === "function";
const toStore = isCallable(newValue)
? newValue(lastValue.current)
: newValue;
if (SUPPORTED) window.localStorage.setItem(key, JSON.stringify(toStore));
setValue(toStore);
},
[key]
);
const reset = useCallback(() => {
const isCallable = (value: unknown): value is (prevState: S) => S =>
typeof value === "function";
const toStore = isCallable(defaultValue) ? defaultValue() : defaultValue;
setValue(toStore);
if (SUPPORTED) window.localStorage.removeItem(key);
}, [defaultValue, key]);
return [value, setLocalStateValue, reset];
};
export default useLocalState;
|
