[ADD] useLocalStorage hook

Author: nDriaDev

apps/react-tools-demo/src/components/hooks/useLocalStorage/UseLocalStorage.tsx

@@ -1,23 +1,20 @@
-import { useCallback, useEffect } from "react";
+import { useCallback } from "react";
+import { useLocalStorage } from "../../../../../../packages/react-tools/src/hooks";
 
 /**
 DEMO
  */
 const UseLocalStorage = () => {
+	const [state, setState, , remove] = useLocalStorage({ key: "key" });
 	const func = useCallback(() => {
-		window.localStorage.setItem(Math.random() > 0.5 ? "demo" : "prv", "2");
-		window.dispatchEvent(new Event("storage"));
-	}, []);
+		setState(Math.random() > .5 ? "MAGGIORE" : "MINORE");
+	}, [setState]);
 
-	const clear = useCallback(() => window.localStorage.clear(), []);
+	const clear = useCallback(() => remove(), [remove]);
 
-	useEffect(() => {
-		const listener = (evt: Event) => console.log(evt);
-		window.addEventListener("storage", listener);
 
-		return () => window.removeEventListener("storage", listener);
-	},[])
 	return (<>
+		{state}
 		<button onClick={func}>Prova</button>
 		<button onClick={clear}>clear</button>
 	</>);

apps/react-tools-demo/src/markdown/useEventDispatcher.md

@@ -23,7 +23,7 @@ export const UseEventDispatcher = () => {
 	});
 
 	return (<>
-		state is {state}
+		<em>State is: </em> {state}
 		<br />
 		<form noValidate onSubmit={onSubmit}>
 			<input type="text" ref={inputRef}/>
@@ -38,7 +38,7 @@ export const UseEventDispatcher = () => {
 > - An _inputRef_ ref variable attacched to an input element contained in a form.
 > - An dispatch function returned from _useEventDispatcher_ with _inputRef_ as element.
 > - An onSubmit function to handle form onSubmit that invokes _dispatch_ function with a CustomEvent("demo") which detail is valued with input value taken from onSubmit event.
-> - A useEventListener of type _demo_, on element _inputRef_ and a listener that takes CustomEvent and invokes setState with event detail.
+> - A useEventListener of type _demo_, on element _inputRef_ and with a listener that takes CustomEvent and invokes setState with event detail.
 
 
 ## API

apps/react-tools-demo/src/markdown/useLocalStorage.md

@@ -5,20 +5,16 @@
 
 ```tsx
 const UseLocalStorage = () => {
+	const [state, setState, , remove] = useLocalStorage({ key: "key" });
 	const func = useCallback(() => {
-		window.localStorage.setItem(Math.random() > 0.5 ? "demo" : "prv", "2");
-		window.dispatchEvent(new Event("storage"));
-	}, []);
+		setState(Math.random() > 0.5);
+	}, [setState]);
 
-	const clear = useCallback(() => window.localStorage.clear(), []);
+	const clear = useCallback(() => remove(), [remove]);
 
-	useEffect(() => {
-		const listener = (evt: Event) => console.log(evt);
-		window.addEventListener("storage", listener);
 
-		return () => window.removeEventListener("storage", listener);
-	},[])
 	return (<>
+		{state}
 		<button onClick={func}>Prova</button>
 		<button onClick={clear}>clear</button>
 	</>);
@@ -35,7 +31,7 @@ export { UseLocalStorage };
 ## API
 
 ```tsx
-useLocalStorage = <T>(key: string, initialState?: T | (()=>T)) 
+useLocalStorage = <T>({ key, initialState, opts = { serializer: JSON.stringify, deserializer: JSON.parse } }: { key: string, initialState?: T | (() => T), opts?: { serializer: (item: T) => string, deserializer: (item: string) => T } }): [T, Dispatch<SetStateAction<T>>, ()=>T, ()=>void] 
 ```
 
 > ### Params

packages/react-tools/README.md

@@ -7,7 +7,7 @@
 	- [x] useReducerGetReset
 	- [x] useReducerHistory
 	- [x] useReducerHistoryGetter
-	- [-] useLocalStorage
+	- [-] useLocalStorage (Manca documentazione)
 	- [ ] useSessionStorage
 	- [ ] useMap
 	- [ ] useSet

packages/react-tools/src/hooks/index.ts

@@ -4,6 +4,7 @@ export { useStateHistory } from './useStateHistory';
 export { useStateHistoryGetter } from './useStateHistoryGetter';
 export { useReducerGetReset } from "./useReducerGetReset";
 export { useReducerHistory } from './useReducerHistory';
+export { useLocalStorage } from './useLocalStorage';
 export { useMemoizedFunction } from './useMemoizedFunction';
 export { useMemoCompare } from "./useMemoCompare";
 export { useMemoDeepCompare } from './useMemoDeepCompare';

packages/react-tools/src/hooks/useLocalStorage.ts

@@ -1,30 +1,68 @@
-import { useState } from "react"
-import { useMemoizedFunction } from ".";
+import { Dispatch, SetStateAction, useRef, useState } from "react"
+import { useEventDispatcher, useEventListener, useMemoizedFunction } from ".";
 
-export const useLocalStorage = <T>(key: string, initialState?: T | (()=>T)) => {
-	const [internalState, setState] = useState(() => {
+export const useLocalStorage = <T>({ key, initialState, opts = { serializer: JSON.stringify, deserializer: JSON.parse } }: { key: string, initialState?: T | (() => T), opts?: { serializer: (item: T) => string, deserializer: (item: string) => T } }): [T, Dispatch<SetStateAction<T>>, ()=>T, ()=>void] => {
+	const dispatch = useEventDispatcher();
+	const [internalState, setState] = useState<T>(() => {
 		const state = localStorage.getItem(key);
 		if (state != null) {
-			return JSON.parse(state);
+			return opts.deserializer(state);
 		} else if (initialState) {
 			const result: T = initialState instanceof Function
 				? initialState()
 				: internalState;
-			localStorage.setItem(key, JSON.stringify(result));
+			localStorage.setItem(key, opts.serializer(result));
 			return result;
 		} else {
-			return null;
+			return null as T;
 		}
 	})
 
+	const listener = useRef((evt: Event) => {
+		let newValue;
+		if (evt instanceof CustomEvent) {
+			newValue = opts.deserializer(evt.detail.newValue);
+			setState(newValue);
+		} else {
+			const typedEvent = evt as StorageEvent;
+			if (typedEvent.key === key) {
+				newValue = typedEvent.newValue ? opts.deserializer(typedEvent.newValue) : opts.deserializer("null");
+				setState(newValue);
+			}
+		}
+	});
 
+	useEventListener({ type: "storage", listener: listener.current, listenerOpts: { capture: true } });
 
-	const updateState = useMemoizedFunction((value: T | ((state: T) => T)) => {
-		const computedValue = value instanceof Function
+	useEventListener({ type: "local-strg", listener: listener.current, listenerOpts: { capture: true } });
+
+	const updateState: Dispatch<SetStateAction<T>> = useMemoizedFunction((value: T | ((state: T) => T)) => {
+		const computedValue = opts.serializer(value instanceof Function
 			? value(internalState)
-			: value;
-		localStorage.setItem(key, JSON.stringify(computedValue));
+			: value);
+		localStorage.setItem(key, computedValue);
+		dispatch(new CustomEvent(
+			"local-strg",
+			{
+				detail: {
+					key,
+					newValue: computedValue,
+				}
+			}
+		));
+	});
+
+	const remove = useRef(() => {
+		localStorage.removeItem(key);
+		setState(null as T);
 	});
 
+	const getter = useMemoizedFunction(() => internalState);
 
+	return [
+		internalState,
+		updateState,
+		getter,
+		remove.current
+	];
 }

packages/react-tools/src/index.ts

@@ -10,6 +10,7 @@ export {
 	useStateHistoryGetter,
 	useReducerGetReset,
 	useReducerHistory,
+	useLocalStorage,
 	useMemoCompare,
 	useMemoDeepCompare,
 	useCallbackCompare,