@tour-kit/coreHooks
useKeyboard
useKeyboard hook: add arrow key navigation, Escape to close, and custom keyboard shortcuts to product tours
useKeyboard
Manages keyboard navigation within tours.
Usage
import { useKeyboard } from '@tour-kit/core';
function TourWithKeyboard() {
useKeyboard({
enabled: true,
bindings: {
next: ['ArrowRight', 'Enter'],
prev: ['ArrowLeft'],
skip: ['Escape'],
},
});
return <TourContent />;
}Configuration
Prop
Type
Default Key Bindings
| Action | Keys |
|---|---|
| Next | ArrowRight, Enter |
| Previous | ArrowLeft |
| Skip | Escape |
Custom Bindings
useKeyboard({
bindings: {
next: ['ArrowRight', 'ArrowDown', 'n'],
prev: ['ArrowLeft', 'ArrowUp', 'p'],
skip: ['Escape', 'q'],
complete: ['c'],
},
});Disabling Keyboard
// Disable for the entire tour
<TourProvider tour={{ ...config, keyboard: false }}>
// Or conditionally
useKeyboard({ enabled: !isInputFocused });