Skip to main content
Desktop users expect ⌘N for “new”, ⌘F for “find” and Delete for “remove”. @cskn/ui has a small set of helpers that read mod as ⌘ on a Mac (and on an iPad keyboard) and Ctrl everywhere else, so one binding works on both.

​
useShortcut

Binds a shortcut for as long as the component is mounted.
​
string
required
Modifiers and a key joined with +: mod, shift, alt, then the key, such as n, escape, arrowup, space or delete. delete matches the key a keyboard labels Delete: ⌫ on a Mac, Del or Backspace elsewhere.
​
(e: KeyboardEvent) => boolean | void
required
Runs on the key. Return false to decline it, for example when the screen is covered, and leave it to others.
​
boolean
default:"true"
Turn the binding off without unmounting.
  • A shortcut without a modifier doesn’t fire while the user is typing in a field. Escape is the exception.
  • A shortcut with a modifier fires everywhere.
  • A handled key’s default action is prevented.
In the desktop shell on macOS, a shortcut you list in the app menu belongs to the menu. Handle it there and bind it with useShortcut only for the browser.

​
Showing shortcuts

formatShortcut(combo) writes a combination the way the platform does, for menus and tooltips:
ContextMenu items take shortcut to show such a hint, and keys to run the item when its element has keyboard focus. matchesShortcut(event, combo) checks a keyboard event against a combination in your own handlers, and isMacKeyboard() tells you which modifier mod means.

​
Built-in keys

The kit already handles these, so don’t bind them yourself: