Navigation

Keyboard shortcuts

import { ShortcutHelp } from '@jsonresume/ui'Source(opens in a new tab)

Examples

J / K navigation and ? help

Viewing job 1 of 20. Press J / K to move, ? for all shortcuts.

Show code

shortcuts/help.tsx

'use client';

import { Kbd, ShortcutHelp, Text, useShortcut } from '@jsonresume/ui';
import { useState } from 'react';

// Press ? anywhere on this page to open the help. J and K move between jobs.
export default function ShortcutsHelp() {
  const [job, setJob] = useState(1);
  useShortcut('j', () => setJob((n) => Math.min(n + 1, 20)));
  useShortcut('k', () => setJob((n) => Math.max(n - 1, 1)));
  return (
    <>
      <Text>
        Viewing job {job} of 20. Press <Kbd>J</Kbd> / <Kbd>K</Kbd> to move,{' '}
        <Kbd>?</Kbd> for all shortcuts.
      </Text>
      <ShortcutHelp
        groups={[
          {
            title: 'Jobs graph',
            shortcuts: [
              { keys: 'j', description: 'Next job' },
              { keys: 'k', description: 'Previous job' },
              { keys: 'mod+k', description: 'Search jobs' },
            ],
          },
          {
            title: 'General',
            shortcuts: [{ keys: '?', description: 'Show this help' }],
          },
        ]}
      />
    </>
  );
}

Usage

Do

Use single keys only where focus is not in a text field.
List every shortcut in the help dialog.

Don’t

Override browser or screen-reader shortcuts.

Accessibility

Single-key shortcuts are ignored while typing in a field.
Keys are shown for the platform (⌘ on Mac, Ctrl elsewhere).

Props

Also accepts the attributes of the element ShortcutHelp renders.
Prop	Type	Default	Description
groups required	ShortcutGroup[]	–
title	string	Keyboard shortcuts
trigger	string	?	Key that opens the help; "?" by default.