Raccourcis clavier

Les raccourcis clavier permettent aux joueurs de déclencher des actions directement depuis le clavier, comme la sauvegarde rapide, le passage des dialogues, ou le contrôle d'un minijeu. Plutôt que de gérer vous-même les appels à window.addEventListener("keydown", ...), il est recommandé d'utiliser TanStack Hotkeys, une bibliothèque qui transforme la saisie clavier en un système de commandes typé avec des portées, des séquences, des touches maintenues et une détection des conflits.

Utilisation

Enregistrez un raccourci clavier avec le hook useHotkey :

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

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

Le modificateur Mod se résout automatiquement en Meta (Cmd) sur macOS et en Control sur Windows/Linux, de sorte que le même code fonctionne sur toutes les plateformes.

Portée et activation conditionnelle

useHotkey est un hook, il enregistre donc le raccourci lorsque le composant est monté et le nettoie automatiquement lorsque le composant est démonté — vous n'avez pas besoin de supprimer vous-même l'écouteur, contrairement à un window.addEventListener manuel.

Utilisez l'option target pour limiter un raccourci clavier à un élément spécifique, et enabled pour l'activer ou le désactiver selon l'état de votre jeu, par exemple pendant qu'un minijeu est en cours :

const panelRef = useRef<HTMLDivElement>(null);

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

En savoir plus

TanStack Hotkeys prend également en charge les séquences de touches (par exemple "G puis D"), les touches maintenues, la détection des conflits et un panneau devtools. Consultez la documentation officielle pour l'ensemble des fonctionnalités.