Timelinx

KeyboardShortcutsOverlay

Modal overlay displaying all available keyboard shortcuts

KeyboardShortcutsOverlay renders a full-screen overlay listing all available keyboard shortcuts grouped by category. It closes automatically on Escape or backdrop click.

Live Example

Loading...

Usage

import { KeyboardShortcutsOverlay } from '@timelinx/ui';
import { useState } from 'react';

function HelpButton() {
  const [show, setShow] = useState(false);

  return (
    <>
      <button onClick={() => setShow(true)}>?</button>
      <KeyboardShortcutsOverlay
        isVisible={show}
        onClose={() => setShow(false)}
      />
    </>
  );
}

Props

Prop

Type

Standalone

KeyboardShortcutsOverlay is a standalone component - no context providers needed.

On this page