@hrnec06/react_utils 1.3.5 → 1.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hrnec06/react_utils",
-  "version": "1.3.5",
+  "version": "1.4.1",
   "description": "A debugger component for react.",
   "exports": {
     ".": "./src/index.ts"

package/src/hooks/useKeyListener.ts

@@ -1,3 +1,4 @@
+import { KeyboardButton } from "@hrnec06/util";
 import { useEffect, useState } from "react";
 
 interface KeyListenerOptions {
@@ -5,9 +6,11 @@ interface KeyListenerOptions {
 	shift?: boolean,
 	alt?: boolean
 }
-export default function useKeyListener(key: string, options?: KeyListenerOptions) {
+export default function useKeyListener(key: string | KeyboardButton, options?: KeyListenerOptions, element?: EventTarget) {
 	const [pressing, setPressing] = useState(false);
 
+	element ||= window;
+
 	const keyMatching = (e: KeyboardEvent, strict: boolean): boolean => {
 		if (strict && options?.ctrl && !e.ctrlKey)
 			return false;
@@ -34,12 +37,12 @@ export default function useKeyListener(key: string, options?: KeyListenerOptions
 			setPressing(false);
 		}
 
-		window.addEventListener('keydown', downListener);
-		window.addEventListener('keyup', upListener);
+		element.addEventListener('keydown', downListener as EventListenerOrEventListenerObject);
+		element.addEventListener('keyup', upListener as EventListenerOrEventListenerObject);
 
 		return () => {
-			window.removeEventListener('keydown', downListener);
-			window.removeEventListener('keyup', upListener);
+			element.removeEventListener('keydown', downListener as EventListenerOrEventListenerObject);
+			element.removeEventListener('keyup', upListener as EventListenerOrEventListenerObject);
 		}
 	}, []);
 

package/src/index.ts

@@ -14,6 +14,8 @@ import useLazySignal, { LazySignal } from "./hooks/useLazySignal";
 import Debugger from './components/Debugger/Debugger';
 import ResizeableBox from "./components/ResizeableBox/ResizeableBox";
 
+import * as util from './lib/utils';
+
 export {
 	useKeyListener,
 	useListener,
@@ -32,4 +34,6 @@ export {
 	
 	Debugger,
 	ResizeableBox,
+
+	util
 };

package/src/lib/utils.ts

@@ -0,0 +1,8 @@
+import { Vector2, Vector3 } from "@hrnec06/util";
+
+export function vectorToTransform(vector: Vector2 | Vector3): string
+{
+	const values = vector.reduce((prev, curr, ix) => prev + (ix ? ', ' : '') + curr + 'px', '');
+
+	return 'translate(' + values + ')';
+}