ScopedKeybinds

function ScopedKeybinds<S>(__namedParameters): Element | null;

Declarative keybind binding driven by a KeybindRegistry scope.

Reads keybind definitions from the given scope, filters to those with a matching handler, and renders a <Keybind> for each one. When priority is set, all rendered keybinds fire before focused-input handlers, letting them override duplicate keys from other scopes.

Type Parameters

Type Parameter
S extends string

Parameters

Parameter	Type
__namedParameters	ScopedKeybindsProps<S>

Returns

Element | null

Examples

import { createKeybindRegistry, ScopedKeybinds } from "@semos-labs/glyph";

const registry = createKeybindRegistry({
  global: [
    { key: "q", display: "q", description: "Quit", action: "quit" },
  ],
  list: [
    { key: "j", display: "j / ↓", description: "Next", action: "next" },
    { key: "down", display: "j / ↓", description: "Next", action: "next" },
  ],
});

function MyList() {
  return (
    <ScopedKeybinds
      registry={registry}
      scope="list"
      handlers={{ next: () => moveDown(), prev: () => moveUp() }}
    />
  );
}

// Priority keybinds override duplicate keys from other scopes
<ScopedKeybinds
  registry={registry}
  scope="dialog"
  handlers={{ confirm: save, cancel: close }}
  priority
/>

---

Type Parameters

Type Parameter	Default type
S extends string	string

Properties

Property	Type	Description
enabled?	boolean	Enable / disable all keybinds in this scope. Default true.
handlers	ActionHandlers	Map of action names to handler functions. Only keybinds whose action has a truthy handler are bound.
priority?	boolean	When true, keybinds run before focused-input handlers, overriding duplicate keys from non-priority scopes.
registry	KeybindRegistry<S>	The keybind registry to read from.
scope	S	Which scope to bind.

---

ActionHandlers

type ActionHandlers = Record<string, () => void | undefined>;

Map of action identifiers to handler functions.

Actions whose handler is undefined are skipped (no Keybind is rendered).