LocalStorage

import { useEffect, useState } from "react";

export function useLocalStorage(
	key: string,
	defaultValue: string,
	sync: boolean = false,
) {
	const [value, setValue] = useState(
		window.localStorage.getItem(key) ?? defaultValue,
	);

	const setter = (newValue: string) => {
		window.localStorage.setItem(key, newValue);
		setValue(newValue);
	};

	useEffect(() => {
		const storage = (event: StorageEvent) => {
			if (event.key === key) {
				setValue(event.newValue ?? defaultValue);
			}
		};

		if (sync) {
			window.addEventListener("storage", storage);
		}

		return () => {
			if (sync) {
				window.removeEventListener("storage", storage);
			}
		};
	}, []);

	return [value, setter] as const;
}

import { useLocalStorage } from "@hooks/ReactLocalStorage";

const MODES = ["LIGHT", "DARK"] as const;

export function LocalStorage() {
	const [storageMode, setStorageMode] = useLocalStorage(
		"mode",
		MODES[0],
		true,
	);

	return (
		<div>
			<select
				onChange={(event) => {
					setStorageMode(event.currentTarget.value);
				}}
				value={storageMode}
			>
				{MODES.map((mode) => (
					<option key={mode} value={mode}>
						{mode}
					</option>
				))}
			</select>
			<div>{storageMode}</div>
		</div>
	);
}