KeyHints#

A one-line shortcut footer — accent keys, dim labels, faint separators, e.g. r reload · d devices · q quit. Deliberately lighter than StatusBar: no chips, no fill.

Import#

TSX 
import { KeyHints } from '@sigx/terminal';
import type { KeyHint } from '@sigx/terminal';

Usage#

TSX 
/** @jsxImportSource @sigx/terminal */
import { component, defineApp, KeyHints } from '@sigx/terminal';
import type { KeyHint } from '@sigx/terminal';

const hints: KeyHint[] = [
    { key: 'r', label: 'reload' },
    { key: 'd', label: 'devices' },
    { key: 'q', label: 'quit' },
];

const App = component(() => {
    return () => (
        <box>
            <KeyHints hints={hints} separator=" · " />
        </box>
    );
});

defineApp(<App />).mount({ clearConsole: true });

Props#

PropTypeNotes
hintsKeyHint[]required — the shortcuts
separatorstringbetween hints

KeyHint#

TypeScript 
interface KeyHint {
    key: string;
    label: string;
}

See also#