Skip to main content

KeyboardShortcutsPanel

from v9.3

KeyboardShortcutsPanel renders a read-only keyboard, mouse, and trackpad interaction reference. It can be embedded inside a modal, sidebar, or info box.

Usage​

Use KeyboardShortcutsPanel when the shortcuts reference should live inside an existing panel layout.

import {
  KeyboardShortcutsPanel,
  type KeyboardShortcutsPanelProps
} from '@deck.gl-community/panels';

Props​

type KeyboardShortcutsPanelProps = {
  keyboardShortcuts?: KeyboardShortcut[];
  theme?: 'inherit' | 'light' | 'dark' | 'invert';
};

Remarks​

  • Renders keyboard chords, mouse interactions, and trackpad interactions from displayInputs.
  • Groups shortcuts into navigation, interaction, command, and settings sections.
  • Uses displayPair to render related primary and secondary shortcuts on the same row.
  • De-duplicates badges for paired rows.
  • Defaults to an id of keyboard-shortcuts and a title of Keyboard & Mouse.
  • Works as a plain panel, so it can be combined with tabbed, column, or accordion layouts.