Skip to content

Hooks

Per-hook API reference for @diffgazer/keys.

Keyboard and focus hooks split into two groups. Standalone hooks work anywhere — they take a ref, return handlers or run effects, and need no setup. Provider-backed hooks register through KeyboardProvider so they share one key dispatcher and participate in the scope stack; wrap your app (or the relevant subtree) in a provider to use them.

Standalone hooks

No provider required. Diffgazer packages are not yet published to npm; until the first release, pack @diffgazer/keys from the repository and install that tarball.

HookUse it for
useNavigationArrow-key movement, selection, and focus tracking across a role-based list or tab bar.
useFocusTrapKeeping Tab and Shift+Tab focus inside a modal or overlay container.
useFocusRestoreReturning focus to where the user was after triggerless temporary UI closes.
useScrollLockFreezing body or container scroll behind an overlay, with reference counting.

Provider-backed hooks

Require KeyboardProvider. Package-only, since dispatch goes through the shared registry.

tsx
import { KeyboardProvider } from "@diffgazer/keys";

function App() {
  return (
    <KeyboardProvider>
      <ApplicationRoutes />
    </KeyboardProvider>
  );
}
HookUse it for
useKeyBinding an individual shortcut, optionally scoped to a region or scope.
useScopeLetting a dialog or drawer shadow a page-level shortcut while it is open.
useScopedNavigationScope-aware list navigation that works without first clicking into the list.
useActionRowNavigationTwo-zone rows with content plus a strip of inline action buttons.
useFocusZoneMoving focus between regions of a layout via arrow keys or Tab.

Choosing a navigation hook

See the navigation, scopes, and focus zones guides for end-to-end patterns.