React Hotkeys Hook Studio

How to use React Hotkeys Hook Studio

1. Click anywhere on the page so it has focus, then press ctrl+k and watch the counter demo fire, or press g then d within one second for the sequence demo.
2. Use the scope buttons to enable, disable or toggle the editor and settings scopes, then try ctrl+e and ctrl+, to see scoped hotkeys fire or get blocked.
3. Click the focus trap box and press t, type in the form input and press ctrl+b, or start the key recorder and press keys to record them.
4. Open the custom hotkey builder, type your own binding, set preventDefault, keyup, enabled and scope, register it and press it to see it fire.
5. Open the options reference or the usage code tabs and copy the exact install command and useHotkeys code into your own React app.

Features

• 8 live in-page demos from the real library: ctrl+k counter, ctrl+s with preventDefault, g then d sequence, editor and settings scopes, focus trap, keyup trigger and form-tag hotkey
• Custom hotkey builder with the real options: preventDefault, keyup, enabled and scopes, plus comma-separated combos and sequence syntax
• Scope controls matching the real useHotkeysContext API: enableScope, disableScope and toggleScope, with active scopes shown live
• Key playground showing the last key event, keys currently held, and a live isHotkeyPressed check for ctrl+k
• Key recorder matching useRecordHotkeys behaviour, with start, stop and Escape-to-stop controls
• Full 18-option reference taken from the repo README and types, with real defaults for splitKey, delimiter, scopes, keyup, keydown and sequenceTimeoutMs
• 7 copy-paste code tabs: install, quick start, scopes with HotkeysProvider, focus trap ref, isHotkeyPressed, useRecordHotkeys and scope controls
• Honest demo label: the studio demos the hook behaviour in this page and does not install the npm package, with the MIT licence notice in the source

Frequently asked questions