[WIP] useHotKeys hook

Author: nDriaDev

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

@@ -7,16 +7,15 @@ Hook to merge multiple refs into one.
 export const UseMergedRef = () => {
 	const [state, setState] = useState(false);
 	const [refCb] = useResizeObserver<HTMLDivElement>(
-		(entries: ResizeObserverEntry[]) => {
+		useCallback((entries: ResizeObserverEntry[]) => {
 			const result = entries[0].contentRect.width < 100;
 			result !== state && setState(result);
-		}
+		}, [state])
 	);
 	const ref = useRef<HTMLDivElement>(null);
 	const mergedRef = useMergedRef<HTMLDivElement>(ref, refCb);
 
 	const changeBorderColor = () => {
-		mergedRef.current;
 		ref.current && (ref.current.style.border = ref.current.style.border.indexOf("lightgray") !== -1
 			? '1px solid darkcyan'
 			: '1px solid lightgray'
@@ -38,16 +37,16 @@ export const UseMergedRef = () => {
 ## API
 
 ```tsx
-useMergedRef <T>(...refs: React.Ref<T>[]) 
+useMergedRef <T>(...refs: Ref<T>[]) 
 ```
 
 > ### Params
 >
-> - __refs__: _React.Ref<T>[]_
+> - __refs__: _Ref<T>[]_
 >
 
 > ### Returns
 >
 > __mergedRef__
-> - _React.RefObject<T>_  
+> - _RefObject<T>_  
 >

packages/react-tools/README.md

@@ -41,8 +41,6 @@
 	- [x] useMemoCompare
 	- [x] useMemoDeepCompare
 	- [x] useMergedRef
-	- [ ] useObjectRef
-	- [ ] useArrayRef
 	- [x] useLazyRef
 	- [x] useId
 
@@ -68,7 +66,6 @@
 	- [x] useDoubleClick
 	- [x] useBeforeUnload
 	- [x] useScreen (orientation and ecc)
-	- [ ] useKeysEvents
 	- [ ] useHotKeys (https://mantine.dev/hooks/use-hotkeys/)
 	- [ ] useImageOnLoad
 	- [ ] usePinchZoom

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

@@ -68,4 +68,4 @@ export { useDialogBox } from './useDialogBox';
 export { useBeforeUnload } from './useBeforeUnload';
 export { useDoubleClick } from './useDoubleClick';
 export { useScreen } from './useScreen';
-export { useMergedRef } from './useMergedRef';
+export { useMergedRef } from './useMergedRef';

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

@@ -11,7 +11,7 @@ import { useMemoizedFunction } from ".";
  * @param {"normal"|"layout"} [options.effectType="normal"] - option to set which hook is used to attach event listener.
  * @returns {()=>void} remove - used to manually remove the eventListener
  */
-export const useEventListener = ({ type, listener, element = window, listenerOpts, effectType="normal" }: { type: string, listener: (evt: Event | CustomEvent) => void, element?: RefObject<HTMLElement> | Window, listenerOpts?: boolean | AddEventListenerOptions, effectType?: "normal" | "layout" }) => {
+export const useEventListener = <T extends Event | CustomEvent>({ type, listener, element = window, listenerOpts, effectType="normal" }: { type: string, listener: ((evt: T) => unknown | Promise<unknown>), element?: RefObject<HTMLElement> | Window, listenerOpts?: boolean | AddEventListenerOptions, effectType?: "normal" | "layout" }) => {
 	const optsMemoized = useRef<typeof listenerOpts>(listenerOpts);
 	const elementReference = useRef<HTMLElement | Window | null>();
 	const effect = effectType === "layout" ? useLayoutEffect : useEffect;
@@ -24,14 +24,14 @@ export const useEventListener = ({ type, listener, element = window, listenerOpt
 				: null
 			: element as Window
 
-		elementReference.current && (elementReference.current as HTMLElement | Window).addEventListener(type, listener, opts);
+		elementReference.current && (elementReference.current as HTMLElement | Window).addEventListener(type, listener as EventListenerOrEventListenerObject, opts);
 		return () => {
-			elementReference.current && (elementReference.current as HTMLElement | Window).removeEventListener(type, listener, opts);
+			elementReference.current && (elementReference.current as HTMLElement | Window).removeEventListener(type, listener as EventListenerOrEventListenerObject, opts);
 		}
 	}, [element, type, listener]);
 
 	const remove = useMemoizedFunction(() => {
-		elementReference.current && (elementReference.current as HTMLElement | Window).removeEventListener(type, listener, optsMemoized.current);
+		elementReference.current && (elementReference.current as HTMLElement | Window).removeEventListener(type, listener as EventListenerOrEventListenerObject, optsMemoized.current);
 	});
 
 	return remove;

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

@@ -0,0 +1,52 @@
+import { KeyboardEvent as KeyEvt, RefObject, useCallback } from "react";
+import { useEventListener } from ".";
+
+
+export const useHotKeys = ({ hotKey, type = "keydown", target = window, listener, listenerOpts }: { hotKey: string | `${'alt' | 'ctrl' | 'meta' | 'shift' | 'ctrlCommand'}+${string}` | `${'alt' | 'ctrl' | 'meta' | 'shift' | 'ctrlCommand'}+${'alt' | 'ctrl' | 'meta' | 'shift' | 'ctrlCommand'}+${string}`, type?: "keydown" | "keyup", target?: RefObject<HTMLElement> | Window, listener: (evt: KeyboardEvent | KeyEvt<HTMLElement>) => void | Promise<void>, listenerOpts?: boolean | AddEventListenerOptions }) => {
+	const handler = useCallback((evt: KeyboardEvent | KeyEvt<HTMLElement>) => {
+		let keys = hotKey.toLowerCase().split("+").map(el => el.trim());
+		const modifiers = {
+			alt: keys.includes('alt'),
+			ctrl: keys.includes('ctrl'),
+			meta: keys.includes('meta'),
+			ctrlCommand: keys.includes('ctrlcommand'),
+			shift: keys.includes('shift'),
+		};
+		keys = keys.filter(el => !['alt', 'ctrl', 'meta', 'shift', 'ctrlCommand'].includes(el));
+		for (let i = 0, size = keys.length; i < size; i++) {
+			if (keys[i] === "" && (i + 1) < size && keys[i + 1] === "") {
+				keys[i + 1] = "+";
+			}
+		}
+		keys = keys.filter(el => el !== "")
+		const { altKey, ctrlKey, metaKey, shiftKey, key: pressedKey } = evt;
+		if (modifiers.ctrlCommand) {
+			if (!ctrlKey && !metaKey) {
+				return false;
+			}
+		} else {
+			if (ctrlKey !== modifiers.ctrl) {
+				return false;
+			}
+			if (altKey !== modifiers.alt) {
+				return false;
+			}
+			if (metaKey !== modifiers.meta) {
+				return false;
+			}
+			if (shiftKey !== modifiers.shift) {
+				return false;
+			}
+		}
+	}, []);
+
+	const remove = useEventListener<KeyboardEvent>({
+		type,
+		listener: handler,
+		listenerOpts,
+		element: target,
+		effectType: "normal"
+	});
+
+	return remove;
+}

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

@@ -1,14 +1,21 @@
-import React, { MutableRefObject, useEffect, useRef } from "react";
+import { Ref, MutableRefObject, useMemo, useRef } from "react";
 
 /**
  * **`useMergedRef`**: Hook to merge multiple refs into one.
- * @param {React.Ref<T>[]} refs
- * @returns {React.RefObject<T>} mergedRef
+ * @param {Ref<T>[]} refs
+ * @returns {RefObject<T>} mergedRef
  */
-export const useMergedRef = <T>(...refs: React.Ref<T>[]) => {
+export const useMergedRef = <T>(...refs: Ref<T>[]) => {
 	const mergedRef = useRef<T>(null);
-	useEffect(() => {
-		refs.forEach(ref => typeof ref === "function" ? ref(mergedRef.current) : (ref as MutableRefObject<T | null>).current = mergedRef.current);
-	}, [refs]);
-	return mergedRef;
+	return useMemo(() => (Object.defineProperty({}, "current", {
+		get() {
+			return (mergedRef as MutableRefObject<T>).current;
+		},
+		set(value: T) {
+			(mergedRef as MutableRefObject<T | null>).current = value;
+			refs.forEach(ref => typeof ref === "function" ? ref(mergedRef.current) : (ref as MutableRefObject<T | null>).current = mergedRef.current);
+		},
+		enumerable: false,
+		configurable: false,
+	})), [refs]) as Ref<T>;
 }