Components

HotkeysHelp

A help screen assembled from the very same list of shortcuts.

A keyboard shortcuts help screen, opened with «?». Assembled from the very same array that was handed to the handler.

Example

tsx

import { HotkeysHelp } from "@toimetdev/pathlogs-core";

const hotkeys = [
  { keys: "g d", label: "Projects", group: "Navigation", handler: () => router.push("/dashboard") },
  { keys: "g m", label: "My tasks", group: "Navigation", handler: () => router.push("/my") },
  { keys: "d", label: "Mark as done", group: "Board", handler: markDone },
  { keys: "mod+k", label: "Search", allowInInput: true, handler: openPalette },
];

<HotkeysHelp hotkeys={hotkeys} hint="«g» is the leader: press g, then a second key." />

There is no need to call useHotkeys separately — the component does it itself and adds the help shortcut to the list.

One list

Only entries with a caption make it into the help. Shortcuts without a label are treated as internal — close the window, confirm — and would be noise in the list.

Sections appear in order of first use rather than alphabetically: that way the author's intent is visible, whereas the alphabet would shuffle related groups apart.

Props

Prop	Type	Default	Description
`hotkeys`*	`Hotkey[]`	—	The same list you would hand to useHotkeys.
`hotkey`	`string`	`"?"`	The shortcut that opens the help.
`title`	`string`	`"Keyboard shortcuts"`	The window heading.
`hint`	`string`	—	A note at the bottom — about the leader key, for instance.

hotkeys*Hotkey[]

The same list you would hand to useHotkeys.

hotkeystring

defaults to: "?"

The shortcut that opens the help.

titlestring

defaults to: "Keyboard shortcuts"

The window heading.

hintstring

A note at the bottom — about the leader key, for instance.

Entries such as mod, arrowup and escape are shown as ⌘/Ctrl, ↑ and Esc: the event name reads worse than the symbol itself.