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>] { 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]; }