ykonsole2/webui-react/src/hooks/keyboard.ts

import {Dispatch, SetStateAction, useEffect, useMemo, useState} from "react";

export function useKey(keys: string | string[], func: () => void, deps: any[] = []) {
  useEffect(() => {
    const f = (ev: KeyboardEvent) => {
      const fixedKey = Array.isArray(keys) ? keys : [keys];

      if (fixedKey.includes(ev.key)) {
        func();
      }
    };

    window.addEventListener("keydown", f);

    return () => {
      window.removeEventListener("keydown", f);
    };
  }, [keys, func, ...deps]);
}

export function usePlusMinus(length: number): [number, Dispatch<SetStateAction<number>>] {
  const [current, setCurrent] = useState(0);

  useKey("-", () => setCurrent(prev => prev <= 0 ? length - 1 : prev - 1), [length]);
  useKey("+", () => setCurrent(prev => prev >= length - 1 ? 0 : prev + 1), [length]);

  useEffect(() => {
    if (current < 0) {
      setCurrent(0);
    } else if (current > length - 1) {
      setCurrent(length - 1);
    }
  }, [length]);

  return [current, setCurrent];
}