Component

KeyboardCartography

Apply the map to turn each character into its actual QWERTY row and column address; spaces and punctuation are marked as off-map terrain. Restore wording returns the supplied label.

Possible use

It could let a reviewer audit which keyboard terrain a handoff phrase crosses, or let a presenter turn an agenda caption into a miniature typing map before restoring it. The addresses describe the input device, not the meaning.

Reasonable alternative

A reasonable local alternative is leaving the label readable and using a local diagnostic utility when keyboard positions genuinely matter. A display component should not turn copy into a map legend.

01 / Preview

Try it yourself.

Prepare the ordinary handoff

Mechanism

1: Start with a readable sentence.
2: Apply the keyboard map with one click.
3: Each character becomes its actual QWERTY row and column.
4: Restore wording when the map has outlived its usefulness.

02 / Usage

Put it somewhere.

example.tsxTSX

import { KeyboardCartography } from "gra-ui";
import "gra-ui/styles.css";

export function MappedLabel() {
  return <KeyboardCartography label="Prepare the ordinary handoff" />;
}

03 / API

Small surface area.

PropTypeDescription

labelstringThe text converted into per-character keyboard coordinates.