Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProBind a keyboard shortcut such as mod+k to a handler, with sensible defaults, form-field safety and a formatHotkey helper that shows the right keys for Mac and PC.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Use it for app-wide or element-scoped shortcuts: open the command palette with mod+k, save with mod+s, close with escape, or move through a list with j and k.
Do not use it for typed sequences like "g then i" (use useKeySequence) or to detect a held modifier (use useKeyHeld). Do not make a shortcut the only way to reach a feature.
This hook uses react-hotkeys-hook; the CLI installs it for you.
import { useHotkey } from "@/hooks/use-hotkey"useHotkey("mod+k", () => setOpen(true))
useHotkey(["mod+s"], save, { enableOnFormTags: true })
<kbd>{formatHotkey("mod+k")}</kbd>useHotkey(keys, handler, options?): RefCallback
| Name | Type | Description |
|---|---|---|
keys | string | string[] | Combinations like mod+k, shift+/, escape. mod is Cmd on Mac and Ctrl elsewhere. |
handler | (event: KeyboardEvent) => void | Called when the combination is pressed. |
options | react-hotkeys-hook options | Defaults to preventDefault: true. Set enabled, enableOnFormTags, scopes, keyup and more. |
The returned ref callback is optional: attach it to an element to scope the shortcut to that element. By default shortcuts are ignored while typing in inputs, textareas and selects.
formatHotkey(keys, platform?) turns "mod+shift+k" into "⌘⇧K" on Mac and "Ctrl+Shift+K" elsewhere, for showing the shortcut in a menu or tooltip.
Single-character shortcuts can clash with speech input and screen readers; let people disable or remap them (WCAG 2.1.4). Show shortcuts in menus with aria-keyshortcuts, and list them in a help dialog.
The hook ships with renderHook tests (use-hotkey.test.ts) covering its behaviour, cleanup on unmount and server-safe defaults. It is safe to render on the server.