@tour-kit/coreHooks
useKeyboard
useKeyboard hook: add arrow key navigation, Escape to close, and custom keyboard shortcuts to product tours
domidex01Published
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 });Related
useFocusTrap— pair with this hook for full keyboard a11y insiderole="dialog".useAdvanceOn— programmatic step advance triggered by non-keyboard events.- Accessibility guide — WCAG keyboard requirements.
<TourProvider>— setkeyboardconfig globally instead of per-step.
Ship onboarding, not config.
npm i @tour-kit/core is MIT and free. The Pro packages work unlicensed too — a one-time $99 license removes the production watermark when you ship.
MIT-licensed — no signup, no credit card. Pay once, only when you ship.