SSE Hooks

useKey

A powerful sensor hook for handling keyboard shortcuts, sequences, and modifiers. It supports complex key combinations (Ctrl+Shift+S), Gmail-style sequences (g then i), and provides metadata for generating "Keyboard Shortcut" UI help modals.

Installation

npx sse-hooks add use-key

yarn dlx sse-hooks add use-key

pnpm dlx sse-hooks add use-key

deno run -A npm:sse-hooks add use-key

bunx sse-hooks add use-key

Usage

example.ts

import { useKey } from "./{hooks file}";

const { bindings } = useKey(
  {
    // Simple binding
    Escape: () => setModalOpen(false),

    // Modifier binding with config
    "Ctrl+S": {
      action: (e) => saveDocument(),
      preventDefault: true,
      description: "Save changes",
      category: "File",
    },

    // Sequence binding (Gmail style)
    "g i": {
      action: () => navigate("/inbox"),
      description: "Go to Inbox",
      category: "Navigation",
    },
  },
  {
    debug: true,
    allowInInputs: false,
  },
);

API

Parameters

Prop	Default	Type
`options`	`{}`	`UseKeyOptions` Global configuration options.
`keyMap`	-	`KeyMap` An object defining the key bindings and their actions.

Returns

Return Value	Default	Type
`bindings`	-	`Object[]`

Types Aliases

No specific type aliases defined for this component.

Changelog

1ae55 — feat: add useKey hook for keyboard shortcuts and sequences

useHover

Custom hook that tracks whether a DOM element is being hovered over.

useMediaQuery

Custom hook that tracks the state of a media query using the `Match Media API`.