Skip to content

Integrations

Compose @diffgazer/ui components with @diffgazer/keys hooks for scopes, shortcuts, and navigation.

@diffgazer/ui components stay headless about keyboard behavior and compose with @diffgazer/keys for scopes, shortcuts, and navigation. Some keys APIs are standalone — they take a ref and run anywhere, copyable through dgadd. The rest are provider-backed: they register through KeyboardProvider to share one dispatcher and the scope stack, and ship package-only.

Reference & utilities

PageWhat it gives you
Keys OverviewHooks reference, the four install paths, and which capability each path unlocks.
UtilitiesStandalone focus trap, focus restore, and scroll lock; package-only navigation-item helpers and keys() mapping.

Per-area integration

PageWhat it gives you
useKeyBind shortcuts (single key, array, or key map) and push named scopes. Requires KeyboardProvider.
NavigationDOM-driven arrow-key navigation for lists, menus, and tab bars; Home/End and Enter/Space. Standalone.
Focus ZonesMove focus between layout regions via arrow keys and Tab cycling. Requires KeyboardProvider.
PatternsEnd-to-end examples for Menu, Dialog, CommandPalette, Tabs, and multi-zone layouts.

Which page do I need?

  • A keyboard shortcut — useKey (requires KeyboardProvider).
  • List, menu, or tab movement — Navigation (standalone).
  • Movement between regions of a layout — Focus Zones (requires KeyboardProvider).
  • Focus trap, focus restore, or scroll lock — Utilities (standalone).
  • A full worked example — Patterns.