Inputs

Shortcut recorder

Records a keyboard shortcut in the caller's format (`parse`). A press without the needed modifier says what it needs; the state and the result are announced.

Set: Change records the next combination, Escape cancels

Live

Open full size

set.tsx

import { Button } from "@nibapp/ui/components/button";import { ShortcutRecorder } from "@nibapp/ui/components/shortcut-recorder";import { isMacPlatform } from "@nibapp/ui/keys";import { useState } from "react";/** The example's own format: logical keys joined with "+", and ⌘ (Ctrl elsewhere) or Alt required. */function parse(event: KeyboardEvent): string | undefined {  const mod = isMacPlatform() ? event.metaKey : event.ctrlKey;  if (!(mod || event.altKey) || !/^(Key[A-Z]|Digit\d|Space)$/u.test(event.code)) return undefined;  const key = event.code.replace(/^(Key|Digit)/u, "").toLowerCase();  return [mod && "mod", event.altKey && "alt", event.shiftKey && "shift", key].filter(Boolean).join("+");}export default function Recorded() {  const [shortcut, setShortcut] = useState<string | null>("mod+shift+space");  return (    <ShortcutRecorder      keys={shortcut === null ? null : shortcut.split("+")}      parse={parse}      needs={{ modifiers: ["mod", "alt"] }}      onRecord={setShortcut}      className="w-80"    >      {shortcut !== null && (        <Button size="sm" variant="ghost" onClick={() => setShortcut(null)}>          Turn off        </Button>      )}    </ShortcutRecorder>  );}

Off

Live

Open full size

off.tsx

import { Button } from "@nibapp/ui/components/button";import { ShortcutRecorder } from "@nibapp/ui/components/shortcut-recorder";import { isMacPlatform } from "@nibapp/ui/keys";import { useState } from "react";/** The example's own format: logical keys joined with "+", and ⌘ (Ctrl elsewhere) or Alt required. */function parse(event: KeyboardEvent): string | undefined {  const mod = isMacPlatform() ? event.metaKey : event.ctrlKey;  if (!(mod || event.altKey) || !/^(Key[A-Z]|Digit\d|Space)$/u.test(event.code)) return undefined;  const key = event.code.replace(/^(Key|Digit)/u, "").toLowerCase();  return [mod && "mod", event.altKey && "alt", event.shiftKey && "shift", key].filter(Boolean).join("+");}export default function Off() {  const [shortcut, setShortcut] = useState<string | null>(null);  return (    <ShortcutRecorder      keys={shortcut === null ? null : shortcut.split("+")}      parse={parse}      needs={{ modifiers: ["mod", "alt"] }}      onRecord={setShortcut}      className="w-80"    >      {shortcut !== null && (        <Button size="sm" variant="ghost" onClick={() => setShortcut(null)}>          Turn off        </Button>      )}    </ShortcutRecorder>  );}