wehub-resource-sync
56 lines
1.3 KiB
TypeScript
56 lines
1.3 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useCallback, useEffect } from "react";
|
|
|
|
const noop = () => {};
|
|
|
|
/**
|
|
* Persist state in localStorage with JSON serialization.
|
|
* SSR-safe: returns initial value until mounted.
|
|
* Use this only for persistence (page reload). For shared state between
|
|
* components, use React Context instead.
|
|
*/
|
|
export function useLocalStorage<T>(
|
|
key: string,
|
|
initialValue: T,
|
|
): [T, (value: T | ((prev: T) => T)) => void] {
|
|
const [stored, setStored] = useState<T>(initialValue);
|
|
const [mounted, setMounted] = useState(false);
|
|
|
|
useEffect(() => {
|
|
setMounted(true);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (!mounted || typeof window === "undefined") return;
|
|
try {
|
|
const raw = window.localStorage.getItem(key);
|
|
if (raw != null) {
|
|
setStored(JSON.parse(raw) as T);
|
|
}
|
|
} catch {
|
|
noop();
|
|
}
|
|
}, [key, mounted]);
|
|
|
|
const setValue = useCallback(
|
|
(value: T | ((prev: T) => T)) => {
|
|
setStored((prev: T) => {
|
|
const next =
|
|
typeof value === "function" ? (value as (p: T) => T)(prev) : value;
|
|
if (typeof window !== "undefined") {
|
|
try {
|
|
window.localStorage.setItem(key, JSON.stringify(next));
|
|
} catch {
|
|
noop();
|
|
}
|
|
}
|
|
return next;
|
|
});
|
|
},
|
|
[key],
|
|
);
|
|
|
|
return [stored, setValue];
|
|
}
|