@hrnec06/react_utils 1.1.0 → 1.2.0

package/src/hooks/useKeyListener.ts

@@ -0,0 +1,47 @@
+import { useEffect, useState } from "react";
+
+interface KeyListenerOptions {
+	ctrl?: boolean,
+	shift?: boolean,
+	alt?: boolean
+}
+export default function useKeyListener(key: string, options?: KeyListenerOptions) {
+	const [pressing, setPressing] = useState(false);
+
+	const keyMatching = (e: KeyboardEvent, strict: boolean): boolean => {
+		if (strict && options?.ctrl && !e.ctrlKey)
+			return false;
+
+		if (strict && options?.shift && !e.shiftKey)
+			return false;
+
+		if (strict && options?.alt && !e.altKey)
+			return false;
+
+		return e.code == key;
+	}
+
+	useEffect(() => {
+		const downListener = (e: KeyboardEvent) => {
+			if (!keyMatching(e, true)) return;
+
+			setPressing(true);
+		}
+
+		const upListener = (e: KeyboardEvent) => {
+			if (!keyMatching(e, false)) return;
+
+			setPressing(false);
+		}
+
+		window.addEventListener('keydown', downListener);
+		window.addEventListener('keyup', upListener);
+
+		return () => {
+			window.removeEventListener('keydown', downListener);
+			window.removeEventListener('keyup', upListener);
+		}
+	}, []);
+
+	return pressing;
+}

package/src/hooks/useListener.ts

@@ -0,0 +1,11 @@
+import { DependencyList, useEffect } from "react"
+
+export default function useListener<E extends keyof GlobalEventHandlersEventMap>(element: Node, event: E, listener: (event: GlobalEventHandlersEventMap[E]) => void, deps?: DependencyList) {
+	useEffect(() => {
+		element.addEventListener(event, listener as EventListenerOrEventListenerObject);
+
+		return () => {
+			element.removeEventListener(event, listener as EventListenerOrEventListenerObject);
+		}
+	}, deps);
+}

package/src/hooks/useSignal.ts

@@ -0,0 +1,31 @@
+import { ReactUtils } from "@hrnec06/util";
+import { useState } from "react";
+
+export default function useSignal<T>(value: T): Signal<T>
+{
+	const [_value, _setValue] = useState(value);
+
+	const signal = new Signal(_value, _setValue);
+
+	return signal;
+}
+
+export class Signal<T>
+{
+	constructor(
+		private _value: T,
+		private setState: ReactUtils.SetState<T>
+	)
+	{
+	}
+
+	public set value(value: T)
+	{
+		this.setState(value);
+	}
+
+	public get value(): T
+	{
+		return this._value;
+	}
+}

package/src/hooks/useUpdateEffect.ts

@@ -0,0 +1,14 @@
+import { useEffect, useRef, useState } from "react";
+
+export default function useUpdateEffect(callback: React.EffectCallback, value: unknown[]) {
+	const isFirstRun = useRef(true);
+
+	useEffect(() => {
+		if (isFirstRun.current) {
+			isFirstRun.current = false;
+			return;
+		}
+
+		return callback();
+	}, value);
+}

package/src/hooks/useUpdatedRef.ts

@@ -0,0 +1,12 @@
+import { useRef } from "react";
+import useUpdateEffect from "./useUpdateEffect";
+
+export default function useUpdatedRef<V>(value: V): React.RefObject<V> {
+	const ref = useRef(value);
+
+	useUpdateEffect(() => {
+		ref.current = value;
+	}, [value]);
+
+	return ref;
+}

package/src/hooks/useWindowSize.ts

@@ -0,0 +1,22 @@
+import { Vector2 } from "@hrnec06/util";
+import { useEffect, useState } from "react";
+
+export default function useWindowSize(): Vector2 {
+	const [dimensions, setDimensions] = useState<Vector2>([1920, 1080]);
+
+	useEffect(() => {
+		setDimensions([window.innerWidth, window.innerHeight]);
+
+		const listener = () => {
+			setDimensions([window.innerWidth, window.innerHeight]);
+		}
+
+		window.addEventListener('resize', listener);
+
+		return () => {
+			window.removeEventListener('resize', listener);
+		}
+	}, []);
+
+	return dimensions;
+}

package/src/index.tsx

@@ -0,0 +1,17 @@
+import useKeyListener from "./hooks/useKeyListener";
+import useListener from "./hooks/useListener";
+import useUpdatedRef from "./hooks/useUpdatedRef";
+import useUpdateEffect from "./hooks/useUpdateEffect";
+import useWindowSize from "./hooks/useWindowSize";
+import useSignal from "./hooks/useSignal";
+import Debugger from './debugger/Debugger';
+
+export {
+	useKeyListener,
+	useListener,
+	useUpdatedRef,
+	useUpdateEffect,
+	useWindowSize,
+	useSignal,
+	Debugger
+};

package/dist/index.d.mts

@@ -1,40 +0,0 @@
-import { DependencyList } from 'react';
-import { Vector2, ReactUtils } from '@hrnec06/util';
-import * as react_jsx_runtime from 'react/jsx-runtime';
-
-interface KeyListenerOptions {
-    ctrl?: boolean;
-    shift?: boolean;
-    alt?: boolean;
-}
-declare function useKeyListener(key: string, options?: KeyListenerOptions): boolean;
-
-declare function useListener<E extends keyof GlobalEventHandlersEventMap>(element: Node, event: E, listener: (event: GlobalEventHandlersEventMap[E]) => void, deps?: DependencyList): void;
-
-declare function useUpdatedRef<V>(value: V): React.RefObject<V>;
-
-declare function useUpdateEffect(callback: React.EffectCallback, value: unknown[]): void;
-
-declare function useWindowSize(): Vector2;
-
-declare function useSignal<T>(value: T): Signal<T>;
-declare class Signal<T> {
-    private _value;
-    private setState;
-    constructor(_value: T, setState: ReactUtils.SetState<T>);
-    set value(value: T);
-    get value(): T;
-}
-
-interface DebugProps {
-    value: unknown;
-    openPaths?: string[];
-    excludePaths?: string[];
-    size?: 'normal' | 'big' | 'tiny';
-    compactArrays?: number;
-    autoHeight?: boolean;
-    openRoot?: boolean;
-}
-declare function Debug({ value, openPaths, excludePaths, size, compactArrays, autoHeight, openRoot }: DebugProps): react_jsx_runtime.JSX.Element;
-
-export { Debug as Debugger, useKeyListener, useListener, useSignal, useUpdateEffect, useUpdatedRef, useWindowSize };

package/dist/index.d.ts

@@ -1,40 +0,0 @@
-import { DependencyList } from 'react';
-import { Vector2, ReactUtils } from '@hrnec06/util';
-import * as react_jsx_runtime from 'react/jsx-runtime';
-
-interface KeyListenerOptions {
-    ctrl?: boolean;
-    shift?: boolean;
-    alt?: boolean;
-}
-declare function useKeyListener(key: string, options?: KeyListenerOptions): boolean;
-
-declare function useListener<E extends keyof GlobalEventHandlersEventMap>(element: Node, event: E, listener: (event: GlobalEventHandlersEventMap[E]) => void, deps?: DependencyList): void;
-
-declare function useUpdatedRef<V>(value: V): React.RefObject<V>;
-
-declare function useUpdateEffect(callback: React.EffectCallback, value: unknown[]): void;
-
-declare function useWindowSize(): Vector2;
-
-declare function useSignal<T>(value: T): Signal<T>;
-declare class Signal<T> {
-    private _value;
-    private setState;
-    constructor(_value: T, setState: ReactUtils.SetState<T>);
-    set value(value: T);
-    get value(): T;
-}
-
-interface DebugProps {
-    value: unknown;
-    openPaths?: string[];
-    excludePaths?: string[];
-    size?: 'normal' | 'big' | 'tiny';
-    compactArrays?: number;
-    autoHeight?: boolean;
-    openRoot?: boolean;
-}
-declare function Debug({ value, openPaths, excludePaths, size, compactArrays, autoHeight, openRoot }: DebugProps): react_jsx_runtime.JSX.Element;
-
-export { Debug as Debugger, useKeyListener, useListener, useSignal, useUpdateEffect, useUpdatedRef, useWindowSize };