Hotkeys

Hotkeys ermöglichen es Spielern, Aktionen direkt über die Tastatur auszulösen, etwa Schnellspeichern, das Überspringen von Dialogen oder die Steuerung eines Minispiels. Anstatt selbst window.addEventListener("keydown", ...)-Aufrufe zu verwalten, empfiehlt es sich, TanStack Hotkeys zu verwenden, eine Bibliothek, die Tastatureingaben in ein typisiertes Befehlssystem mit Scopes, Sequenzen, gehaltenen Tasten und Konflikterkennung umwandelt.

Verwendung

Registriere einen Hotkey mit dem useHotkey-Hook:

import { useHotkey } from "@tanstack/react-hotkeys";

useHotkey("Mod+S", () => {
    quickSave();
});

Der Modifikator Mod wird auf macOS automatisch zu Meta (Cmd) und unter Windows/Linux zu Control aufgelöst, sodass derselbe Code plattformübergreifend funktioniert.

Scoping und bedingtes Aktivieren

useHotkey ist ein Hook, der die Tastenkombination beim Mounten der Komponente registriert und beim Unmounten automatisch wieder entfernt — anders als bei einem manuellen window.addEventListener musst du den Listener nicht selbst entfernen.

Verwende die Option target, um einen Hotkey auf ein bestimmtes Element zu beschränken, und enabled, um ihn je nach Spielstatus ein- oder auszuschalten, zum Beispiel während ein Minispiel läuft:

const panelRef = useRef<HTMLDivElement>(null);

useHotkey("Escape", () => closePanel(), { target: panelRef });
useHotkey("ArrowUp", () => setDirection(0, -1), { enabled: !gameOver });

Mehr erfahren

TanStack Hotkeys unterstützt außerdem Tastenfolgen (z. B. „G dann D“), gehaltene Tasten, Konflikterkennung und ein Devtools-Panel. Die vollständige Funktionsübersicht findest du in der offiziellen Dokumentation.