@tanstack/react-hotkeys 0.4.2 → 0.5.1

package/dist/useHotkeys.d.cts

@@ -0,0 +1,60 @@
+import { UseHotkeyOptions } from "./useHotkey.cjs";
+import { HotkeyCallback, RegisterableHotkey } from "@tanstack/hotkeys";
+
+//#region src/useHotkeys.d.ts
+/**
+ * A single hotkey definition for use with `useHotkeys`.
+ */
+interface UseHotkeyDefinition {
+  /** The hotkey string (e.g., 'Mod+S', 'Escape') or RawHotkey object */
+  hotkey: RegisterableHotkey;
+  /** The function to call when the hotkey is pressed */
+  callback: HotkeyCallback;
+  /** Per-hotkey options (merged on top of commonOptions) */
+  options?: UseHotkeyOptions;
+}
+/**
+ * React hook for registering multiple keyboard hotkeys at once.
+ *
+ * Uses the singleton HotkeyManager for efficient event handling.
+ * Accepts a dynamic array of hotkey definitions, making it safe to use
+ * with variable-length lists without violating the rules of hooks.
+ *
+ * Options are merged in this order:
+ * HotkeysProvider defaults < commonOptions < per-definition options
+ *
+ * Callbacks and options are synced on every render to avoid stale closures.
+ *
+ * @param hotkeys - Array of hotkey definitions to register
+ * @param commonOptions - Shared options applied to all hotkeys (overridden by per-definition options)
+ *
+ * @example
+ * ```tsx
+ * function Editor() {
+ *   useHotkeys([
+ *     { hotkey: 'Mod+S', callback: () => save() },
+ *     { hotkey: 'Mod+Z', callback: () => undo() },
+ *     { hotkey: 'Escape', callback: () => close() },
+ *   ])
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * function MenuShortcuts({ items }) {
+ *   // Dynamic hotkeys from data -- safe because it's a single hook call
+ *   useHotkeys(
+ *     items.map((item) => ({
+ *       hotkey: item.shortcut,
+ *       callback: item.action,
+ *       options: { enabled: item.enabled },
+ *     })),
+ *     { preventDefault: true },
+ *   )
+ * }
+ * ```
+ */
+declare function useHotkeys(hotkeys: Array<UseHotkeyDefinition>, commonOptions?: UseHotkeyOptions): void;
+//#endregion
+export { UseHotkeyDefinition, useHotkeys };
+//# sourceMappingURL=useHotkeys.d.cts.map

package/dist/useHotkeys.d.ts

@@ -0,0 +1,60 @@
+import { UseHotkeyOptions } from "./useHotkey.js";
+import { HotkeyCallback, RegisterableHotkey } from "@tanstack/hotkeys";
+
+//#region src/useHotkeys.d.ts
+/**
+ * A single hotkey definition for use with `useHotkeys`.
+ */
+interface UseHotkeyDefinition {
+  /** The hotkey string (e.g., 'Mod+S', 'Escape') or RawHotkey object */
+  hotkey: RegisterableHotkey;
+  /** The function to call when the hotkey is pressed */
+  callback: HotkeyCallback;
+  /** Per-hotkey options (merged on top of commonOptions) */
+  options?: UseHotkeyOptions;
+}
+/**
+ * React hook for registering multiple keyboard hotkeys at once.
+ *
+ * Uses the singleton HotkeyManager for efficient event handling.
+ * Accepts a dynamic array of hotkey definitions, making it safe to use
+ * with variable-length lists without violating the rules of hooks.
+ *
+ * Options are merged in this order:
+ * HotkeysProvider defaults < commonOptions < per-definition options
+ *
+ * Callbacks and options are synced on every render to avoid stale closures.
+ *
+ * @param hotkeys - Array of hotkey definitions to register
+ * @param commonOptions - Shared options applied to all hotkeys (overridden by per-definition options)
+ *
+ * @example
+ * ```tsx
+ * function Editor() {
+ *   useHotkeys([
+ *     { hotkey: 'Mod+S', callback: () => save() },
+ *     { hotkey: 'Mod+Z', callback: () => undo() },
+ *     { hotkey: 'Escape', callback: () => close() },
+ *   ])
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * function MenuShortcuts({ items }) {
+ *   // Dynamic hotkeys from data -- safe because it's a single hook call
+ *   useHotkeys(
+ *     items.map((item) => ({
+ *       hotkey: item.shortcut,
+ *       callback: item.action,
+ *       options: { enabled: item.enabled },
+ *     })),
+ *     { preventDefault: true },
+ *   )
+ * }
+ * ```
+ */
+declare function useHotkeys(hotkeys: Array<UseHotkeyDefinition>, commonOptions?: UseHotkeyOptions): void;
+//#endregion
+export { UseHotkeyDefinition, useHotkeys };
+//# sourceMappingURL=useHotkeys.d.ts.map

package/dist/useHotkeys.js

@@ -0,0 +1,137 @@
+import { useDefaultHotkeysOptions } from "./HotkeysProvider.js";
+import { isRef } from "./utils.js";
+import { detectPlatform, formatHotkey, getHotkeyManager, rawHotkeyToParsedHotkey } from "@tanstack/hotkeys";
+import { useEffect, useRef } from "react";
+
+//#region src/useHotkeys.ts
+/**
+* React hook for registering multiple keyboard hotkeys at once.
+*
+* Uses the singleton HotkeyManager for efficient event handling.
+* Accepts a dynamic array of hotkey definitions, making it safe to use
+* with variable-length lists without violating the rules of hooks.
+*
+* Options are merged in this order:
+* HotkeysProvider defaults < commonOptions < per-definition options
+*
+* Callbacks and options are synced on every render to avoid stale closures.
+*
+* @param hotkeys - Array of hotkey definitions to register
+* @param commonOptions - Shared options applied to all hotkeys (overridden by per-definition options)
+*
+* @example
+* ```tsx
+* function Editor() {
+*   useHotkeys([
+*     { hotkey: 'Mod+S', callback: () => save() },
+*     { hotkey: 'Mod+Z', callback: () => undo() },
+*     { hotkey: 'Escape', callback: () => close() },
+*   ])
+* }
+* ```
+*
+* @example
+* ```tsx
+* function MenuShortcuts({ items }) {
+*   // Dynamic hotkeys from data -- safe because it's a single hook call
+*   useHotkeys(
+*     items.map((item) => ({
+*       hotkey: item.shortcut,
+*       callback: item.action,
+*       options: { enabled: item.enabled },
+*     })),
+*     { preventDefault: true },
+*   )
+* }
+* ```
+*/
+function useHotkeys(hotkeys, commonOptions = {}) {
+	const defaultOptions = useDefaultHotkeysOptions().hotkey;
+	const manager = getHotkeyManager();
+	const platform = commonOptions.platform ?? defaultOptions?.platform ?? detectPlatform();
+	const registrationsRef = useRef(/* @__PURE__ */ new Map());
+	const hotkeysRef = useRef(hotkeys);
+	const hotkeyStringsRef = useRef([]);
+	const commonOptionsRef = useRef(commonOptions);
+	const defaultOptionsRef = useRef(defaultOptions);
+	const managerRef = useRef(manager);
+	const hotkeyStrings = hotkeys.map((def) => typeof def.hotkey === "string" ? def.hotkey : formatHotkey(rawHotkeyToParsedHotkey(def.hotkey, platform)));
+	hotkeysRef.current = hotkeys;
+	hotkeyStringsRef.current = hotkeyStrings;
+	commonOptionsRef.current = commonOptions;
+	defaultOptionsRef.current = defaultOptions;
+	managerRef.current = manager;
+	useEffect(() => {
+		const prevRegistrations = registrationsRef.current;
+		const nextRegistrations = /* @__PURE__ */ new Map();
+		const rows = [];
+		for (let i = 0; i < hotkeysRef.current.length; i++) {
+			const def = hotkeysRef.current[i];
+			const hotkeyStr = hotkeyStringsRef.current[i];
+			const mergedOptions = {
+				...defaultOptionsRef.current,
+				...commonOptionsRef.current,
+				...def.options
+			};
+			const resolvedTarget = isRef(mergedOptions.target) ? mergedOptions.target.current : mergedOptions.target ?? (typeof document !== "undefined" ? document : null);
+			if (!resolvedTarget) continue;
+			const registrationKey = `${i}:${hotkeyStr}`;
+			rows.push({
+				registrationKey,
+				def,
+				hotkeyStr,
+				mergedOptions,
+				resolvedTarget
+			});
+		}
+		const nextKeys = new Set(rows.map((r) => r.registrationKey));
+		for (const [key, record] of prevRegistrations) if (!nextKeys.has(key) && record.handle.isActive) record.handle.unregister();
+		for (const row of rows) {
+			const { registrationKey, def, hotkeyStr, mergedOptions, resolvedTarget } = row;
+			const existing = prevRegistrations.get(registrationKey);
+			if (existing?.handle.isActive && existing.target === resolvedTarget) {
+				nextRegistrations.set(registrationKey, existing);
+				continue;
+			}
+			if (existing?.handle.isActive) existing.handle.unregister();
+			const handle = managerRef.current.register(hotkeyStr, def.callback, {
+				...mergedOptions,
+				target: resolvedTarget
+			});
+			nextRegistrations.set(registrationKey, {
+				handle,
+				target: resolvedTarget
+			});
+		}
+		registrationsRef.current = nextRegistrations;
+		return () => {
+			for (const { handle } of registrationsRef.current.values()) if (handle.isActive) handle.unregister();
+			registrationsRef.current = /* @__PURE__ */ new Map();
+		};
+	}, [hotkeyStrings.join("\0"), hotkeys.map((def) => {
+		return {
+			...defaultOptions,
+			...commonOptions,
+			...def.options
+		}.enabled ?? true;
+	}).join("\0")]);
+	for (let i = 0; i < hotkeys.length; i++) {
+		const def = hotkeys[i];
+		const hotkeyStr = hotkeyStrings[i];
+		const registrationKey = `${i}:${hotkeyStr}`;
+		const handle = registrationsRef.current.get(registrationKey)?.handle;
+		if (handle?.isActive) {
+			handle.callback = def.callback;
+			const { target: _target, ...optionsWithoutTarget } = {
+				...defaultOptions,
+				...commonOptions,
+				...def.options
+			};
+			handle.setOptions(optionsWithoutTarget);
+		}
+	}
+}
+
+//#endregion
+export { useHotkeys };
+//# sourceMappingURL=useHotkeys.js.map

package/dist/useHotkeys.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useHotkeys.js","names":[],"sources":["../src/useHotkeys.ts"],"sourcesContent":["import { useEffect, useRef } from 'react'\nimport {\n  detectPlatform,\n  formatHotkey,\n  getHotkeyManager,\n  rawHotkeyToParsedHotkey,\n} from '@tanstack/hotkeys'\nimport { useDefaultHotkeysOptions } from './HotkeysProvider'\nimport { isRef } from './utils'\nimport type { UseHotkeyOptions } from './useHotkey'\nimport type {\n  Hotkey,\n  HotkeyCallback,\n  HotkeyRegistrationHandle,\n  RegisterableHotkey,\n} from '@tanstack/hotkeys'\n\n/**\n * A single hotkey definition for use with `useHotkeys`.\n */\nexport interface UseHotkeyDefinition {\n  /** The hotkey string (e.g., 'Mod+S', 'Escape') or RawHotkey object */\n  hotkey: RegisterableHotkey\n  /** The function to call when the hotkey is pressed */\n  callback: HotkeyCallback\n  /** Per-hotkey options (merged on top of commonOptions) */\n  options?: UseHotkeyOptions\n}\n\n/**\n * React hook for registering multiple keyboard hotkeys at once.\n *\n * Uses the singleton HotkeyManager for efficient event handling.\n * Accepts a dynamic array of hotkey definitions, making it safe to use\n * with variable-length lists without violating the rules of hooks.\n *\n * Options are merged in this order:\n * HotkeysProvider defaults < commonOptions < per-definition options\n *\n * Callbacks and options are synced on every render to avoid stale closures.\n *\n * @param hotkeys - Array of hotkey definitions to register\n * @param commonOptions - Shared options applied to all hotkeys (overridden by per-definition options)\n *\n * @example\n * ```tsx\n * function Editor() {\n *   useHotkeys([\n *     { hotkey: 'Mod+S', callback: () => save() },\n *     { hotkey: 'Mod+Z', callback: () => undo() },\n *     { hotkey: 'Escape', callback: () => close() },\n *   ])\n * }\n * ```\n *\n * @example\n * ```tsx\n * function MenuShortcuts({ items }) {\n *   // Dynamic hotkeys from data -- safe because it's a single hook call\n *   useHotkeys(\n *     items.map((item) => ({\n *       hotkey: item.shortcut,\n *       callback: item.action,\n *       options: { enabled: item.enabled },\n *     })),\n *     { preventDefault: true },\n *   )\n * }\n * ```\n */\nexport function useHotkeys(\n  hotkeys: Array<UseHotkeyDefinition>,\n  commonOptions: UseHotkeyOptions = {},\n): void {\n  type RegistrationRecord = {\n    handle: HotkeyRegistrationHandle\n    target: Document | HTMLElement | Window\n  }\n\n  const defaultOptions = useDefaultHotkeysOptions().hotkey\n  const manager = getHotkeyManager()\n  const platform =\n    commonOptions.platform ?? defaultOptions?.platform ?? detectPlatform()\n\n  const registrationsRef = useRef<Map<string, RegistrationRecord>>(new Map())\n  const hotkeysRef = useRef(hotkeys)\n  const hotkeyStringsRef = useRef<Array<Hotkey>>([])\n  const commonOptionsRef = useRef(commonOptions)\n  const defaultOptionsRef = useRef(defaultOptions)\n  const managerRef = useRef(manager)\n\n  const hotkeyStrings = hotkeys.map((def) =>\n    typeof def.hotkey === 'string'\n      ? def.hotkey\n      : (formatHotkey(rawHotkeyToParsedHotkey(def.hotkey, platform)) as Hotkey),\n  )\n\n  hotkeysRef.current = hotkeys\n  hotkeyStringsRef.current = hotkeyStrings\n  commonOptionsRef.current = commonOptions\n  defaultOptionsRef.current = defaultOptions\n  managerRef.current = manager\n\n  // Stable serialized keys for effect dependencies\n  const hotkeyKey = hotkeyStrings.join('\\0')\n  const enabledKey = hotkeys\n    .map((def) => {\n      const merged = {\n        ...defaultOptions,\n        ...commonOptions,\n        ...def.options,\n      }\n      return merged.enabled ?? true\n    })\n    .join('\\0')\n\n  useEffect(() => {\n    const prevRegistrations = registrationsRef.current\n    const nextRegistrations = new Map<string, RegistrationRecord>()\n\n    const rows: Array<{\n      registrationKey: string\n      def: (typeof hotkeysRef.current)[number]\n      hotkeyStr: Hotkey\n      mergedOptions: UseHotkeyOptions\n      resolvedTarget: Document | HTMLElement | Window\n    }> = []\n\n    for (let i = 0; i < hotkeysRef.current.length; i++) {\n      const def = hotkeysRef.current[i]!\n      const hotkeyStr = hotkeyStringsRef.current[i]!\n      const mergedOptions = {\n        ...defaultOptionsRef.current,\n        ...commonOptionsRef.current,\n        ...def.options,\n      } as UseHotkeyOptions\n\n      const resolvedTarget = isRef(mergedOptions.target)\n        ? mergedOptions.target.current\n        : (mergedOptions.target ??\n          (typeof document !== 'undefined' ? document : null))\n\n      if (!resolvedTarget) {\n        continue\n      }\n\n      const registrationKey = `${i}:${hotkeyStr}`\n      rows.push({\n        registrationKey,\n        def,\n        hotkeyStr,\n        mergedOptions,\n        resolvedTarget,\n      })\n    }\n\n    const nextKeys = new Set(rows.map((r) => r.registrationKey))\n\n    for (const [key, record] of prevRegistrations) {\n      if (!nextKeys.has(key) && record.handle.isActive) {\n        record.handle.unregister()\n      }\n    }\n\n    for (const row of rows) {\n      const { registrationKey, def, hotkeyStr, mergedOptions, resolvedTarget } =\n        row\n\n      const existing = prevRegistrations.get(registrationKey)\n      if (existing?.handle.isActive && existing.target === resolvedTarget) {\n        nextRegistrations.set(registrationKey, existing)\n        continue\n      }\n\n      if (existing?.handle.isActive) {\n        existing.handle.unregister()\n      }\n\n      const handle = managerRef.current.register(hotkeyStr, def.callback, {\n        ...mergedOptions,\n        target: resolvedTarget,\n      })\n      nextRegistrations.set(registrationKey, {\n        handle,\n        target: resolvedTarget,\n      })\n    }\n\n    registrationsRef.current = nextRegistrations\n\n    return () => {\n      for (const { handle } of registrationsRef.current.values()) {\n        if (handle.isActive) {\n          handle.unregister()\n        }\n      }\n      registrationsRef.current = new Map()\n    }\n  }, [hotkeyKey, enabledKey])\n\n  // Sync callbacks and options on EVERY render (outside useEffect)\n  for (let i = 0; i < hotkeys.length; i++) {\n    const def = hotkeys[i]!\n    const hotkeyStr = hotkeyStrings[i]!\n    const registrationKey = `${i}:${hotkeyStr}`\n    const handle = registrationsRef.current.get(registrationKey)?.handle\n\n    if (handle?.isActive) {\n      handle.callback = def.callback\n      const mergedOptions = {\n        ...defaultOptions,\n        ...commonOptions,\n        ...def.options,\n      } as UseHotkeyOptions\n      const { target: _target, ...optionsWithoutTarget } = mergedOptions\n      handle.setOptions(optionsWithoutTarget)\n    }\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsEA,SAAgB,WACd,SACA,gBAAkC,EAAE,EAC9B;CAMN,MAAM,iBAAiB,0BAA0B,CAAC;CAClD,MAAM,UAAU,kBAAkB;CAClC,MAAM,WACJ,cAAc,YAAY,gBAAgB,YAAY,gBAAgB;CAExE,MAAM,mBAAmB,uBAAwC,IAAI,KAAK,CAAC;CAC3E,MAAM,aAAa,OAAO,QAAQ;CAClC,MAAM,mBAAmB,OAAsB,EAAE,CAAC;CAClD,MAAM,mBAAmB,OAAO,cAAc;CAC9C,MAAM,oBAAoB,OAAO,eAAe;CAChD,MAAM,aAAa,OAAO,QAAQ;CAElC,MAAM,gBAAgB,QAAQ,KAAK,QACjC,OAAO,IAAI,WAAW,WAClB,IAAI,SACH,aAAa,wBAAwB,IAAI,QAAQ,SAAS,CAAC,CACjE;AAED,YAAW,UAAU;AACrB,kBAAiB,UAAU;AAC3B,kBAAiB,UAAU;AAC3B,mBAAkB,UAAU;AAC5B,YAAW,UAAU;AAerB,iBAAgB;EACd,MAAM,oBAAoB,iBAAiB;EAC3C,MAAM,oCAAoB,IAAI,KAAiC;EAE/D,MAAM,OAMD,EAAE;AAEP,OAAK,IAAI,IAAI,GAAG,IAAI,WAAW,QAAQ,QAAQ,KAAK;GAClD,MAAM,MAAM,WAAW,QAAQ;GAC/B,MAAM,YAAY,iBAAiB,QAAQ;GAC3C,MAAM,gBAAgB;IACpB,GAAG,kBAAkB;IACrB,GAAG,iBAAiB;IACpB,GAAG,IAAI;IACR;GAED,MAAM,iBAAiB,MAAM,cAAc,OAAO,GAC9C,cAAc,OAAO,UACpB,cAAc,WACd,OAAO,aAAa,cAAc,WAAW;AAElD,OAAI,CAAC,eACH;GAGF,MAAM,kBAAkB,GAAG,EAAE,GAAG;AAChC,QAAK,KAAK;IACR;IACA;IACA;IACA;IACA;IACD,CAAC;;EAGJ,MAAM,WAAW,IAAI,IAAI,KAAK,KAAK,MAAM,EAAE,gBAAgB,CAAC;AAE5D,OAAK,MAAM,CAAC,KAAK,WAAW,kBAC1B,KAAI,CAAC,SAAS,IAAI,IAAI,IAAI,OAAO,OAAO,SACtC,QAAO,OAAO,YAAY;AAI9B,OAAK,MAAM,OAAO,MAAM;GACtB,MAAM,EAAE,iBAAiB,KAAK,WAAW,eAAe,mBACtD;GAEF,MAAM,WAAW,kBAAkB,IAAI,gBAAgB;AACvD,OAAI,UAAU,OAAO,YAAY,SAAS,WAAW,gBAAgB;AACnE,sBAAkB,IAAI,iBAAiB,SAAS;AAChD;;AAGF,OAAI,UAAU,OAAO,SACnB,UAAS,OAAO,YAAY;GAG9B,MAAM,SAAS,WAAW,QAAQ,SAAS,WAAW,IAAI,UAAU;IAClE,GAAG;IACH,QAAQ;IACT,CAAC;AACF,qBAAkB,IAAI,iBAAiB;IACrC;IACA,QAAQ;IACT,CAAC;;AAGJ,mBAAiB,UAAU;AAE3B,eAAa;AACX,QAAK,MAAM,EAAE,YAAY,iBAAiB,QAAQ,QAAQ,CACxD,KAAI,OAAO,SACT,QAAO,YAAY;AAGvB,oBAAiB,0BAAU,IAAI,KAAK;;IAErC,CA9Fe,cAAc,KAAK,KAAK,EACvB,QAChB,KAAK,QAAQ;AAMZ,SALe;GACb,GAAG;GACH,GAAG;GACH,GAAG,IAAI;GACR,CACa,WAAW;GACzB,CACD,KAAK,KAAK,CAoFa,CAAC;AAG3B,MAAK,IAAI,IAAI,GAAG,IAAI,QAAQ,QAAQ,KAAK;EACvC,MAAM,MAAM,QAAQ;EACpB,MAAM,YAAY,cAAc;EAChC,MAAM,kBAAkB,GAAG,EAAE,GAAG;EAChC,MAAM,SAAS,iBAAiB,QAAQ,IAAI,gBAAgB,EAAE;AAE9D,MAAI,QAAQ,UAAU;AACpB,UAAO,WAAW,IAAI;GAMtB,MAAM,EAAE,QAAQ,SAAS,GAAG,yBALN;IACpB,GAAG;IACH,GAAG;IACH,GAAG,IAAI;IACR;AAED,UAAO,WAAW,qBAAqB"}

package/dist/utils.cjs

@@ -0,0 +1,12 @@
+
+//#region src/utils.ts
+/**
+* Type guard to check if a value is a React ref-like object.
+*/
+function isRef(value) {
+	return value !== null && typeof value === "object" && "current" in value;
+}
+
+//#endregion
+exports.isRef = isRef;
+//# sourceMappingURL=utils.cjs.map

package/dist/utils.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.cjs","names":[],"sources":["../src/utils.ts"],"sourcesContent":["import type React from 'react'\n\n/**\n * Type guard to check if a value is a React ref-like object.\n */\nexport function isRef(\n  value: unknown,\n): value is React.RefObject<HTMLElement | null> {\n  return value !== null && typeof value === 'object' && 'current' in value\n}\n"],"mappings":";;;;;AAKA,SAAgB,MACd,OAC8C;AAC9C,QAAO,UAAU,QAAQ,OAAO,UAAU,YAAY,aAAa"}

package/dist/utils.js

@@ -0,0 +1,11 @@
+//#region src/utils.ts
+/**
+* Type guard to check if a value is a React ref-like object.
+*/
+function isRef(value) {
+	return value !== null && typeof value === "object" && "current" in value;
+}
+
+//#endregion
+export { isRef };
+//# sourceMappingURL=utils.js.map

package/dist/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","names":[],"sources":["../src/utils.ts"],"sourcesContent":["import type React from 'react'\n\n/**\n * Type guard to check if a value is a React ref-like object.\n */\nexport function isRef(\n  value: unknown,\n): value is React.RefObject<HTMLElement | null> {\n  return value !== null && typeof value === 'object' && 'current' in value\n}\n"],"mappings":";;;;AAKA,SAAgB,MACd,OAC8C;AAC9C,QAAO,UAAU,QAAQ,OAAO,UAAU,YAAY,aAAa"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-hotkeys",
-  "version": "0.4.2",
+  "version": "0.5.1",
   "description": "React adapter for TanStack Hotkeys",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -40,13 +40,13 @@
   ],
   "dependencies": {
     "@tanstack/react-store": "^0.9.2",
-    "@tanstack/hotkeys": "0.4.2"
+    "@tanstack/hotkeys": "0.4.3"
   },
   "devDependencies": {
-    "@eslint-react/eslint-plugin": "^2.13.0",
+    "@eslint-react/eslint-plugin": "^3.0.0",
     "@testing-library/react": "^16.3.2",
     "@types/react": "^19.2.14",
-    "@vitejs/plugin-react": "^5.1.4",
+    "@vitejs/plugin-react": "^6.0.1",
     "eslint-plugin-react-compiler": "19.1.0-rc.2",
     "eslint-plugin-react-hooks": "^7.0.1",
     "react": "^19.2.4",

package/src/index.ts

@@ -6,6 +6,7 @@ export * from './HotkeysProvider'
 
 // React-specific exports
 export * from './useHotkey'
+export * from './useHotkeys'
 export * from './useHeldKeys'
 export * from './useHeldKeyCodes'
 export * from './useKeyHold'

package/src/useHotkey.ts

@@ -6,6 +6,7 @@ import {
   rawHotkeyToParsedHotkey,
 } from '@tanstack/hotkeys'
 import { useDefaultHotkeysOptions } from './HotkeysProvider'
+import { isRef } from './utils'
 import type {
   Hotkey,
   HotkeyCallback,
@@ -182,10 +183,3 @@ export function useHotkey(
     registrationRef.current.setOptions(optionsWithoutTarget)
   }
 }
-
-/**
- * Type guard to check if a value is a React ref-like object.
- */
-function isRef(value: unknown): value is React.RefObject<HTMLElement | null> {
-  return value !== null && typeof value === 'object' && 'current' in value
-}

package/src/useHotkeySequence.ts

@@ -1,6 +1,7 @@
 import { useEffect, useRef } from 'react'
 import { formatHotkeySequence, getSequenceManager } from '@tanstack/hotkeys'
 import { useDefaultHotkeysOptions } from './HotkeysProvider'
+import { isRef } from './utils'
 import type {
   HotkeyCallback,
   HotkeyCallbackContext,
@@ -32,6 +33,11 @@ export interface UseHotkeySequenceOptions extends Omit<
  * This hook allows you to register multi-key sequences like 'g g' or 'd d'
  * that trigger when the full sequence is pressed within a timeout.
  *
+ * Each step may include modifiers. You can chain the same modifier across
+ * steps (e.g. `Shift+R` then `Shift+T`). Modifier-only keydown events (Shift,
+ * Control, Alt, or Meta pressed alone) are ignored while matching—they do not
+ * advance the sequence or reset progress.
+ *
  * @param sequence - Array of hotkey strings that form the sequence
  * @param callback - Function to call when the sequence is completed
  * @param options - Options for the sequence behavior
@@ -54,6 +60,11 @@ export interface UseHotkeySequenceOptions extends Omit<
  *     deleteInnerWord()
  *   }, { timeout: 500 })
  *
+ *   // Same modifier on consecutive steps (bare Shift between chords is ignored)
+ *   useHotkeySequence(['Shift+R', 'Shift+T'], () => {
+ *     nextAction()
+ *   })
+ *
  *   return <div>...</div>
  * }
  * ```
@@ -77,11 +88,13 @@ export function useHotkeySequence(
   const callbackRef = useRef(callback)
   const optionsRef = useRef(mergedOptions)
   const managerRef = useRef(manager)
+  const sequenceRef = useRef(sequence)
 
   // Update refs on every render
   callbackRef.current = callback
   optionsRef.current = mergedOptions
   managerRef.current = manager
+  sequenceRef.current = sequence
 
   // Track previous target and sequence to detect changes requiring re-registration
   const prevTargetRef = useRef<HTMLElement | Document | Window | null>(null)
@@ -94,7 +107,7 @@ export function useHotkeySequence(
   const { target: _target, ...optionsWithoutTarget } = mergedOptions
 
   useEffect(() => {
-    if (sequence.length === 0) {
+    if (sequenceRef.current.length === 0) {
       return
     }
 
@@ -128,7 +141,7 @@ export function useHotkeySequence(
     // Register if needed (no active registration)
     if (!registrationRef.current || !registrationRef.current.isActive) {
       registrationRef.current = managerRef.current.register(
-        sequence,
+        sequenceRef.current,
         (event, context) => callbackRef.current(event, context),
         {
           ...optionsRef.current,
@@ -148,7 +161,7 @@ export function useHotkeySequence(
         registrationRef.current = null
       }
     }
-  }, [hotkeySequenceString, mergedOptions.enabled, sequence])
+  }, [hotkeySequenceString, mergedOptions.enabled])
 
   // Sync callback and options on EVERY render (outside useEffect)
   if (registrationRef.current?.isActive) {
@@ -159,10 +172,3 @@ export function useHotkeySequence(
     registrationRef.current.setOptions(optionsWithoutTarget)
   }
 }
-
-/**
- * Type guard to check if a value is a React ref-like object.
- */
-function isRef(value: unknown): value is React.RefObject<HTMLElement | null> {
-  return value !== null && typeof value === 'object' && 'current' in value
-}

package/src/useHotkeys.ts

@@ -0,0 +1,219 @@
+import { useEffect, useRef } from 'react'
+import {
+  detectPlatform,
+  formatHotkey,
+  getHotkeyManager,
+  rawHotkeyToParsedHotkey,
+} from '@tanstack/hotkeys'
+import { useDefaultHotkeysOptions } from './HotkeysProvider'
+import { isRef } from './utils'
+import type { UseHotkeyOptions } from './useHotkey'
+import type {
+  Hotkey,
+  HotkeyCallback,
+  HotkeyRegistrationHandle,
+  RegisterableHotkey,
+} from '@tanstack/hotkeys'
+
+/**
+ * A single hotkey definition for use with `useHotkeys`.
+ */
+export interface UseHotkeyDefinition {
+  /** The hotkey string (e.g., 'Mod+S', 'Escape') or RawHotkey object */
+  hotkey: RegisterableHotkey
+  /** The function to call when the hotkey is pressed */
+  callback: HotkeyCallback
+  /** Per-hotkey options (merged on top of commonOptions) */
+  options?: UseHotkeyOptions
+}
+
+/**
+ * React hook for registering multiple keyboard hotkeys at once.
+ *
+ * Uses the singleton HotkeyManager for efficient event handling.
+ * Accepts a dynamic array of hotkey definitions, making it safe to use
+ * with variable-length lists without violating the rules of hooks.
+ *
+ * Options are merged in this order:
+ * HotkeysProvider defaults < commonOptions < per-definition options
+ *
+ * Callbacks and options are synced on every render to avoid stale closures.
+ *
+ * @param hotkeys - Array of hotkey definitions to register
+ * @param commonOptions - Shared options applied to all hotkeys (overridden by per-definition options)
+ *
+ * @example
+ * ```tsx
+ * function Editor() {
+ *   useHotkeys([
+ *     { hotkey: 'Mod+S', callback: () => save() },
+ *     { hotkey: 'Mod+Z', callback: () => undo() },
+ *     { hotkey: 'Escape', callback: () => close() },
+ *   ])
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * function MenuShortcuts({ items }) {
+ *   // Dynamic hotkeys from data -- safe because it's a single hook call
+ *   useHotkeys(
+ *     items.map((item) => ({
+ *       hotkey: item.shortcut,
+ *       callback: item.action,
+ *       options: { enabled: item.enabled },
+ *     })),
+ *     { preventDefault: true },
+ *   )
+ * }
+ * ```
+ */
+export function useHotkeys(
+  hotkeys: Array<UseHotkeyDefinition>,
+  commonOptions: UseHotkeyOptions = {},
+): void {
+  type RegistrationRecord = {
+    handle: HotkeyRegistrationHandle
+    target: Document | HTMLElement | Window
+  }
+
+  const defaultOptions = useDefaultHotkeysOptions().hotkey
+  const manager = getHotkeyManager()
+  const platform =
+    commonOptions.platform ?? defaultOptions?.platform ?? detectPlatform()
+
+  const registrationsRef = useRef<Map<string, RegistrationRecord>>(new Map())
+  const hotkeysRef = useRef(hotkeys)
+  const hotkeyStringsRef = useRef<Array<Hotkey>>([])
+  const commonOptionsRef = useRef(commonOptions)
+  const defaultOptionsRef = useRef(defaultOptions)
+  const managerRef = useRef(manager)
+
+  const hotkeyStrings = hotkeys.map((def) =>
+    typeof def.hotkey === 'string'
+      ? def.hotkey
+      : (formatHotkey(rawHotkeyToParsedHotkey(def.hotkey, platform)) as Hotkey),
+  )
+
+  hotkeysRef.current = hotkeys
+  hotkeyStringsRef.current = hotkeyStrings
+  commonOptionsRef.current = commonOptions
+  defaultOptionsRef.current = defaultOptions
+  managerRef.current = manager
+
+  // Stable serialized keys for effect dependencies
+  const hotkeyKey = hotkeyStrings.join('\0')
+  const enabledKey = hotkeys
+    .map((def) => {
+      const merged = {
+        ...defaultOptions,
+        ...commonOptions,
+        ...def.options,
+      }
+      return merged.enabled ?? true
+    })
+    .join('\0')
+
+  useEffect(() => {
+    const prevRegistrations = registrationsRef.current
+    const nextRegistrations = new Map<string, RegistrationRecord>()
+
+    const rows: Array<{
+      registrationKey: string
+      def: (typeof hotkeysRef.current)[number]
+      hotkeyStr: Hotkey
+      mergedOptions: UseHotkeyOptions
+      resolvedTarget: Document | HTMLElement | Window
+    }> = []
+
+    for (let i = 0; i < hotkeysRef.current.length; i++) {
+      const def = hotkeysRef.current[i]!
+      const hotkeyStr = hotkeyStringsRef.current[i]!
+      const mergedOptions = {
+        ...defaultOptionsRef.current,
+        ...commonOptionsRef.current,
+        ...def.options,
+      } as UseHotkeyOptions
+
+      const resolvedTarget = isRef(mergedOptions.target)
+        ? mergedOptions.target.current
+        : (mergedOptions.target ??
+          (typeof document !== 'undefined' ? document : null))
+
+      if (!resolvedTarget) {
+        continue
+      }
+
+      const registrationKey = `${i}:${hotkeyStr}`
+      rows.push({
+        registrationKey,
+        def,
+        hotkeyStr,
+        mergedOptions,
+        resolvedTarget,
+      })
+    }
+
+    const nextKeys = new Set(rows.map((r) => r.registrationKey))
+
+    for (const [key, record] of prevRegistrations) {
+      if (!nextKeys.has(key) && record.handle.isActive) {
+        record.handle.unregister()
+      }
+    }
+
+    for (const row of rows) {
+      const { registrationKey, def, hotkeyStr, mergedOptions, resolvedTarget } =
+        row
+
+      const existing = prevRegistrations.get(registrationKey)
+      if (existing?.handle.isActive && existing.target === resolvedTarget) {
+        nextRegistrations.set(registrationKey, existing)
+        continue
+      }
+
+      if (existing?.handle.isActive) {
+        existing.handle.unregister()
+      }
+
+      const handle = managerRef.current.register(hotkeyStr, def.callback, {
+        ...mergedOptions,
+        target: resolvedTarget,
+      })
+      nextRegistrations.set(registrationKey, {
+        handle,
+        target: resolvedTarget,
+      })
+    }
+
+    registrationsRef.current = nextRegistrations
+
+    return () => {
+      for (const { handle } of registrationsRef.current.values()) {
+        if (handle.isActive) {
+          handle.unregister()
+        }
+      }
+      registrationsRef.current = new Map()
+    }
+  }, [hotkeyKey, enabledKey])
+
+  // Sync callbacks and options on EVERY render (outside useEffect)
+  for (let i = 0; i < hotkeys.length; i++) {
+    const def = hotkeys[i]!
+    const hotkeyStr = hotkeyStrings[i]!
+    const registrationKey = `${i}:${hotkeyStr}`
+    const handle = registrationsRef.current.get(registrationKey)?.handle
+
+    if (handle?.isActive) {
+      handle.callback = def.callback
+      const mergedOptions = {
+        ...defaultOptions,
+        ...commonOptions,
+        ...def.options,
+      } as UseHotkeyOptions
+      const { target: _target, ...optionsWithoutTarget } = mergedOptions
+      handle.setOptions(optionsWithoutTarget)
+    }
+  }
+}

package/src/utils.ts

@@ -0,0 +1,10 @@
+import type React from 'react'
+
+/**
+ * Type guard to check if a value is a React ref-like object.
+ */
+export function isRef(
+  value: unknown,
+): value is React.RefObject<HTMLElement | null> {
+  return value !== null && typeof value === 'object' && 'current' in value
+}