@tanstack/react-hotkeys 0.11.0 → 0.12.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (94) hide show
  1. package/dist/HotkeysProvider.d.ts +6 -12
  2. package/dist/HotkeysProvider.js +1 -2
  3. package/dist/useHeldKeyCodes.d.ts +2 -4
  4. package/dist/useHeldKeyCodes.js +3 -3
  5. package/dist/useHeldKeys.d.ts +2 -4
  6. package/dist/useHeldKeys.js +3 -3
  7. package/dist/useHotkey.d.ts +3 -6
  8. package/dist/useHotkey.js +3 -3
  9. package/dist/useHotkeyHint.d.ts +2 -5
  10. package/dist/useHotkeyHint.js +1 -2
  11. package/dist/useHotkeyRecorder.d.ts +3 -6
  12. package/dist/useHotkeyRecorder.js +1 -2
  13. package/dist/useHotkeyRegistrations.d.ts +3 -6
  14. package/dist/useHotkeyRegistrations.js +1 -2
  15. package/dist/useHotkeySequence.d.ts +3 -6
  16. package/dist/useHotkeySequence.js +1 -2
  17. package/dist/useHotkeySequenceRecorder.d.ts +3 -6
  18. package/dist/useHotkeySequenceRecorder.js +1 -2
  19. package/dist/useHotkeySequences.d.ts +3 -6
  20. package/dist/useHotkeySequences.js +1 -2
  21. package/dist/useHotkeys.d.ts +3 -6
  22. package/dist/useHotkeys.js +1 -2
  23. package/dist/useKeyHold.d.ts +2 -5
  24. package/dist/useKeyHold.js +1 -2
  25. package/dist/utils.js +1 -2
  26. package/package.json +14 -19
  27. package/dist/HotkeysProvider.cjs +0 -23
  28. package/dist/HotkeysProvider.cjs.map +0 -1
  29. package/dist/HotkeysProvider.d.cts +0 -28
  30. package/dist/HotkeysProvider.js.map +0 -1
  31. package/dist/_virtual/_rolldown/runtime.cjs +0 -29
  32. package/dist/index.cjs +0 -35
  33. package/dist/index.d.cts +0 -14
  34. package/dist/useHeldKeyCodes.cjs +0 -38
  35. package/dist/useHeldKeyCodes.cjs.map +0 -1
  36. package/dist/useHeldKeyCodes.d.cts +0 -31
  37. package/dist/useHeldKeyCodes.js.map +0 -1
  38. package/dist/useHeldKeys.cjs +0 -34
  39. package/dist/useHeldKeys.cjs.map +0 -1
  40. package/dist/useHeldKeys.d.cts +0 -27
  41. package/dist/useHeldKeys.js.map +0 -1
  42. package/dist/useHotkey.cjs +0 -126
  43. package/dist/useHotkey.cjs.map +0 -1
  44. package/dist/useHotkey.d.cts +0 -74
  45. package/dist/useHotkey.js.map +0 -1
  46. package/dist/useHotkeyHint.cjs +0 -19
  47. package/dist/useHotkeyHint.cjs.map +0 -1
  48. package/dist/useHotkeyHint.d.cts +0 -14
  49. package/dist/useHotkeyHint.js.map +0 -1
  50. package/dist/useHotkeyRecorder.cjs +0 -72
  51. package/dist/useHotkeyRecorder.cjs.map +0 -1
  52. package/dist/useHotkeyRecorder.d.cts +0 -57
  53. package/dist/useHotkeyRecorder.js.map +0 -1
  54. package/dist/useHotkeyRegistrations.cjs +0 -49
  55. package/dist/useHotkeyRegistrations.cjs.map +0 -1
  56. package/dist/useHotkeyRegistrations.d.cts +0 -48
  57. package/dist/useHotkeyRegistrations.js.map +0 -1
  58. package/dist/useHotkeySequence.cjs +0 -121
  59. package/dist/useHotkeySequence.cjs.map +0 -1
  60. package/dist/useHotkeySequence.d.cts +0 -58
  61. package/dist/useHotkeySequence.js.map +0 -1
  62. package/dist/useHotkeySequenceRecorder.cjs +0 -42
  63. package/dist/useHotkeySequenceRecorder.cjs.map +0 -1
  64. package/dist/useHotkeySequenceRecorder.d.cts +0 -25
  65. package/dist/useHotkeySequenceRecorder.js.map +0 -1
  66. package/dist/useHotkeySequences.cjs +0 -127
  67. package/dist/useHotkeySequences.cjs.map +0 -1
  68. package/dist/useHotkeySequences.d.cts +0 -63
  69. package/dist/useHotkeySequences.js.map +0 -1
  70. package/dist/useHotkeys.cjs +0 -125
  71. package/dist/useHotkeys.cjs.map +0 -1
  72. package/dist/useHotkeys.d.cts +0 -63
  73. package/dist/useHotkeys.js.map +0 -1
  74. package/dist/useKeyHold.cjs +0 -54
  75. package/dist/useKeyHold.cjs.map +0 -1
  76. package/dist/useKeyHold.d.cts +0 -47
  77. package/dist/useKeyHold.js.map +0 -1
  78. package/dist/utils.cjs +0 -12
  79. package/dist/utils.cjs.map +0 -1
  80. package/dist/utils.js.map +0 -1
  81. package/src/HotkeysProvider.tsx +0 -58
  82. package/src/index.ts +0 -18
  83. package/src/useHeldKeyCodes.ts +0 -33
  84. package/src/useHeldKeys.ts +0 -29
  85. package/src/useHotkey.ts +0 -190
  86. package/src/useHotkeyHint.ts +0 -19
  87. package/src/useHotkeyRecorder.ts +0 -101
  88. package/src/useHotkeyRegistrations.ts +0 -67
  89. package/src/useHotkeySequence.ts +0 -191
  90. package/src/useHotkeySequenceRecorder.ts +0 -70
  91. package/src/useHotkeySequences.ts +0 -192
  92. package/src/useHotkeys.ts +0 -193
  93. package/src/useKeyHold.ts +0 -52
  94. package/src/utils.ts +0 -10
@@ -1,125 +0,0 @@
1
- const require_runtime = require('./_virtual/_rolldown/runtime.cjs');
2
- const require_HotkeysProvider = require('./HotkeysProvider.cjs');
3
- const require_utils = require('./utils.cjs');
4
- let _tanstack_hotkeys = require("@tanstack/hotkeys");
5
- let react = require("react");
6
-
7
- //#region src/useHotkeys.ts
8
- /**
9
- * React hook for registering multiple keyboard hotkeys at once.
10
- *
11
- * Uses the singleton HotkeyManager for efficient event handling.
12
- * Accepts a dynamic array of hotkey definitions, making it safe to use
13
- * with variable-length lists without violating the rules of hooks.
14
- *
15
- * Options are merged in this order:
16
- * HotkeysProvider defaults < commonOptions < per-definition options
17
- *
18
- * Callbacks and options are synced on every render to avoid stale closures.
19
- *
20
- * @param hotkeys - Array of hotkey definitions to register
21
- * @param commonOptions - Shared options applied to all hotkeys (overridden by per-definition options).
22
- * Per-row `enabled: false` still registers that hotkey: `HotkeyManager` suppresses execution only (the row
23
- * stays in the store and appears in TanStack Hotkeys devtools). Toggling `enabled` updates the existing handle
24
- * via `setOptions` (no unregister/re-register churn).
25
- *
26
- * @example
27
- * ```tsx
28
- * function Editor() {
29
- * useHotkeys([
30
- * { hotkey: 'Mod+S', callback: () => save() },
31
- * { hotkey: 'Mod+Z', callback: () => undo() },
32
- * { hotkey: 'Escape', callback: () => close() },
33
- * ])
34
- * }
35
- * ```
36
- *
37
- * @example
38
- * ```tsx
39
- * function MenuShortcuts({ items }) {
40
- * // Dynamic hotkeys from data -- safe because it's a single hook call
41
- * useHotkeys(
42
- * items.map((item) => ({
43
- * hotkey: item.shortcut,
44
- * callback: item.action,
45
- * options: { enabled: item.enabled },
46
- * })),
47
- * { preventDefault: true },
48
- * )
49
- * }
50
- * ```
51
- */
52
- function useHotkeys(hotkeys, commonOptions = {}) {
53
- const defaultOptions = require_HotkeysProvider.useDefaultHotkeysOptions().hotkey;
54
- const manager = (0, _tanstack_hotkeys.getHotkeyManager)();
55
- const platform = commonOptions.platform ?? defaultOptions?.platform ?? (0, _tanstack_hotkeys.detectPlatform)();
56
- const registrationsRef = (0, react.useRef)(/* @__PURE__ */ new Map());
57
- const hotkeysRef = (0, react.useRef)(hotkeys);
58
- const hotkeyStringsRef = (0, react.useRef)([]);
59
- const commonOptionsRef = (0, react.useRef)(commonOptions);
60
- const defaultOptionsRef = (0, react.useRef)(defaultOptions);
61
- const managerRef = (0, react.useRef)(manager);
62
- const hotkeyStrings = hotkeys.map((def) => (0, _tanstack_hotkeys.normalizeRegisterableHotkey)(def.hotkey, platform));
63
- hotkeysRef.current = hotkeys;
64
- hotkeyStringsRef.current = hotkeyStrings;
65
- commonOptionsRef.current = commonOptions;
66
- defaultOptionsRef.current = defaultOptions;
67
- managerRef.current = manager;
68
- (0, react.useEffect)(() => {
69
- const prevRegistrations = registrationsRef.current;
70
- const nextRegistrations = /* @__PURE__ */ new Map();
71
- const rows = [];
72
- for (let i = 0; i < hotkeysRef.current.length; i++) {
73
- const def = hotkeysRef.current[i];
74
- const hotkeyStr = hotkeyStringsRef.current[i];
75
- const mergedOptions = {
76
- ...defaultOptionsRef.current,
77
- ...commonOptionsRef.current,
78
- ...def.options
79
- };
80
- const resolvedTarget = require_utils.isRef(mergedOptions.target) ? mergedOptions.target.current : mergedOptions.target ?? (typeof document !== "undefined" ? document : null);
81
- if (!resolvedTarget) continue;
82
- const registrationKey = `${i}:${hotkeyStr}`;
83
- rows.push({
84
- registrationKey,
85
- def,
86
- hotkeyStr,
87
- mergedOptions,
88
- resolvedTarget
89
- });
90
- }
91
- const nextKeys = new Set(rows.map((r) => r.registrationKey));
92
- for (const [key, record] of prevRegistrations) if (!nextKeys.has(key) && record.handle.isActive) record.handle.unregister();
93
- for (const row of rows) {
94
- const { registrationKey, def, hotkeyStr, mergedOptions, resolvedTarget } = row;
95
- const existing = prevRegistrations.get(registrationKey);
96
- if (existing?.handle.isActive && existing.target === resolvedTarget) {
97
- existing.handle.callback = def.callback;
98
- const { target: _target, ...optionsWithoutTarget } = mergedOptions;
99
- existing.handle.setOptions(optionsWithoutTarget);
100
- nextRegistrations.set(registrationKey, existing);
101
- continue;
102
- }
103
- if (existing?.handle.isActive) existing.handle.unregister();
104
- const handle = managerRef.current.register(hotkeyStr, def.callback, {
105
- ...mergedOptions,
106
- target: resolvedTarget
107
- });
108
- nextRegistrations.set(registrationKey, {
109
- handle,
110
- target: resolvedTarget
111
- });
112
- }
113
- registrationsRef.current = nextRegistrations;
114
- });
115
- (0, react.useEffect)(() => {
116
- return () => {
117
- for (const { handle } of registrationsRef.current.values()) if (handle.isActive) handle.unregister();
118
- registrationsRef.current = /* @__PURE__ */ new Map();
119
- };
120
- }, []);
121
- }
122
-
123
- //#endregion
124
- exports.useHotkeys = useHotkeys;
125
- //# sourceMappingURL=useHotkeys.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useHotkeys.cjs","names":["useDefaultHotkeysOptions","isRef"],"sources":["../src/useHotkeys.ts"],"sourcesContent":["import { useEffect, useRef } from 'react'\nimport {\n detectPlatform,\n getHotkeyManager,\n normalizeRegisterableHotkey,\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 * Per-row `enabled: false` still registers that hotkey: `HotkeyManager` suppresses execution only (the row\n * stays in the store and appears in TanStack Hotkeys devtools). Toggling `enabled` updates the existing handle\n * via `setOptions` (no unregister/re-register churn).\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 normalizeRegisterableHotkey(def.hotkey, platform),\n )\n\n hotkeysRef.current = hotkeys\n hotkeyStringsRef.current = hotkeyStrings\n commonOptionsRef.current = commonOptions\n defaultOptionsRef.current = defaultOptions\n managerRef.current = manager\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 // Publish callback/options only after commit, never during render.\n existing.handle.callback = def.callback\n const { target: _target, ...optionsWithoutTarget } = mergedOptions\n existing.handle.setOptions(optionsWithoutTarget)\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\n useEffect(() => {\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 }, [])\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwEA,SAAgB,WACd,SACA,gBAAkC,EAAE,EAC9B;CAMN,MAAM,iBAAiBA,kDAA0B,CAAC;CAClD,MAAM,mDAA4B;CAClC,MAAM,WACJ,cAAc,YAAY,gBAAgB,mDAA4B;CAExE,MAAM,qDAA2D,IAAI,KAAK,CAAC;CAC3E,MAAM,+BAAoB,QAAQ;CAClC,MAAM,qCAAyC,EAAE,CAAC;CAClD,MAAM,qCAA0B,cAAc;CAC9C,MAAM,sCAA2B,eAAe;CAChD,MAAM,+BAAoB,QAAQ;CAElC,MAAM,gBAAgB,QAAQ,KAAK,2DACL,IAAI,QAAQ,SAAS,CAClD;AAED,YAAW,UAAU;AACrB,kBAAiB,UAAU;AAC3B,kBAAiB,UAAU;AAC3B,mBAAkB,UAAU;AAC5B,YAAW,UAAU;AAErB,4BAAgB;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,iBAAiBC,oBAAM,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;AAEnE,aAAS,OAAO,WAAW,IAAI;IAC/B,MAAM,EAAE,QAAQ,SAAS,GAAG,yBAAyB;AACrD,aAAS,OAAO,WAAW,qBAAqB;AAChD,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;GAC3B;AAEF,4BAAgB;AACd,eAAa;AACX,QAAK,MAAM,EAAE,YAAY,iBAAiB,QAAQ,QAAQ,CACxD,KAAI,OAAO,SACT,QAAO,YAAY;AAGvB,oBAAiB,0BAAU,IAAI,KAAK;;IAErC,EAAE,CAAC"}
@@ -1,63 +0,0 @@
1
- import { UseHotkeyOptions } from "./useHotkey.cjs";
2
- import { HotkeyCallback, RegisterableHotkey } from "@tanstack/hotkeys";
3
-
4
- //#region src/useHotkeys.d.ts
5
- /**
6
- * A single hotkey definition for use with `useHotkeys`.
7
- */
8
- interface UseHotkeyDefinition {
9
- /** The hotkey string (e.g., 'Mod+S', 'Escape') or RawHotkey object */
10
- hotkey: RegisterableHotkey;
11
- /** The function to call when the hotkey is pressed */
12
- callback: HotkeyCallback;
13
- /** Per-hotkey options (merged on top of commonOptions) */
14
- options?: UseHotkeyOptions;
15
- }
16
- /**
17
- * React hook for registering multiple keyboard hotkeys at once.
18
- *
19
- * Uses the singleton HotkeyManager for efficient event handling.
20
- * Accepts a dynamic array of hotkey definitions, making it safe to use
21
- * with variable-length lists without violating the rules of hooks.
22
- *
23
- * Options are merged in this order:
24
- * HotkeysProvider defaults < commonOptions < per-definition options
25
- *
26
- * Callbacks and options are synced on every render to avoid stale closures.
27
- *
28
- * @param hotkeys - Array of hotkey definitions to register
29
- * @param commonOptions - Shared options applied to all hotkeys (overridden by per-definition options).
30
- * Per-row `enabled: false` still registers that hotkey: `HotkeyManager` suppresses execution only (the row
31
- * stays in the store and appears in TanStack Hotkeys devtools). Toggling `enabled` updates the existing handle
32
- * via `setOptions` (no unregister/re-register churn).
33
- *
34
- * @example
35
- * ```tsx
36
- * function Editor() {
37
- * useHotkeys([
38
- * { hotkey: 'Mod+S', callback: () => save() },
39
- * { hotkey: 'Mod+Z', callback: () => undo() },
40
- * { hotkey: 'Escape', callback: () => close() },
41
- * ])
42
- * }
43
- * ```
44
- *
45
- * @example
46
- * ```tsx
47
- * function MenuShortcuts({ items }) {
48
- * // Dynamic hotkeys from data -- safe because it's a single hook call
49
- * useHotkeys(
50
- * items.map((item) => ({
51
- * hotkey: item.shortcut,
52
- * callback: item.action,
53
- * options: { enabled: item.enabled },
54
- * })),
55
- * { preventDefault: true },
56
- * )
57
- * }
58
- * ```
59
- */
60
- declare function useHotkeys(hotkeys: Array<UseHotkeyDefinition>, commonOptions?: UseHotkeyOptions): void;
61
- //#endregion
62
- export { UseHotkeyDefinition, useHotkeys };
63
- //# sourceMappingURL=useHotkeys.d.cts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useHotkeys.js","names":[],"sources":["../src/useHotkeys.ts"],"sourcesContent":["import { useEffect, useRef } from 'react'\nimport {\n detectPlatform,\n getHotkeyManager,\n normalizeRegisterableHotkey,\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 * Per-row `enabled: false` still registers that hotkey: `HotkeyManager` suppresses execution only (the row\n * stays in the store and appears in TanStack Hotkeys devtools). Toggling `enabled` updates the existing handle\n * via `setOptions` (no unregister/re-register churn).\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 normalizeRegisterableHotkey(def.hotkey, platform),\n )\n\n hotkeysRef.current = hotkeys\n hotkeyStringsRef.current = hotkeyStrings\n commonOptionsRef.current = commonOptions\n defaultOptionsRef.current = defaultOptions\n managerRef.current = manager\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 // Publish callback/options only after commit, never during render.\n existing.handle.callback = def.callback\n const { target: _target, ...optionsWithoutTarget } = mergedOptions\n existing.handle.setOptions(optionsWithoutTarget)\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\n useEffect(() => {\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 }, [])\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwEA,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,4BAA4B,IAAI,QAAQ,SAAS,CAClD;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;AAEnE,aAAS,OAAO,WAAW,IAAI;IAC/B,MAAM,EAAE,QAAQ,SAAS,GAAG,yBAAyB;AACrD,aAAS,OAAO,WAAW,qBAAqB;AAChD,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;GAC3B;AAEF,iBAAgB;AACd,eAAa;AACX,QAAK,MAAM,EAAE,YAAY,iBAAiB,QAAQ,QAAQ,CACxD,KAAI,OAAO,SACT,QAAO,YAAY;AAGvB,oBAAiB,0BAAU,IAAI,KAAK;;IAErC,EAAE,CAAC"}
@@ -1,54 +0,0 @@
1
- const require_runtime = require('./_virtual/_rolldown/runtime.cjs');
2
- let _tanstack_hotkeys = require("@tanstack/hotkeys");
3
- let _tanstack_react_store = require("@tanstack/react-store");
4
-
5
- //#region src/useKeyHold.ts
6
- /**
7
- * React hook that returns whether a specific key is currently being held.
8
- *
9
- * This hook uses `useSelector` from `@tanstack/react-store` to subscribe
10
- * to the global KeyStateTracker and uses a selector to determine if
11
- * the specified key is held.
12
- *
13
- * @param key - The key to check (e.g., 'Shift', 'Control', 'A')
14
- * @returns True if the key is currently held down
15
- *
16
- * @example
17
- * ```tsx
18
- * function ShiftIndicator() {
19
- * const isShiftHeld = useKeyHold('Shift')
20
- *
21
- * return (
22
- * <div style={{ opacity: isShiftHeld ? 1 : 0.5 }}>
23
- * {isShiftHeld ? 'Shift is pressed!' : 'Press Shift'}
24
- * </div>
25
- * )
26
- * }
27
- * ```
28
- *
29
- * @example
30
- * ```tsx
31
- * function ModifierIndicators() {
32
- * const ctrl = useKeyHold('Control')
33
- * const shift = useKeyHold('Shift')
34
- * const alt = useKeyHold('Alt')
35
- *
36
- * return (
37
- * <div>
38
- * <span style={{ opacity: ctrl ? 1 : 0.3 }}>Ctrl</span>
39
- * <span style={{ opacity: shift ? 1 : 0.3 }}>Shift</span>
40
- * <span style={{ opacity: alt ? 1 : 0.3 }}>Alt</span>
41
- * </div>
42
- * )
43
- * }
44
- * ```
45
- */
46
- function useKeyHold(key) {
47
- const tracker = (0, _tanstack_hotkeys.getKeyStateTracker)();
48
- const normalizedKey = key.toLowerCase();
49
- return (0, _tanstack_react_store.useSelector)(tracker.store, (state) => state.heldKeys.some((heldKey) => heldKey.toLowerCase() === normalizedKey));
50
- }
51
-
52
- //#endregion
53
- exports.useKeyHold = useKeyHold;
54
- //# sourceMappingURL=useKeyHold.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useKeyHold.cjs","names":[],"sources":["../src/useKeyHold.ts"],"sourcesContent":["import { useSelector } from '@tanstack/react-store'\nimport { getKeyStateTracker } from '@tanstack/hotkeys'\nimport type { IndividualKey } from '@tanstack/hotkeys'\n\n/**\n * React hook that returns whether a specific key is currently being held.\n *\n * This hook uses `useSelector` from `@tanstack/react-store` to subscribe\n * to the global KeyStateTracker and uses a selector to determine if\n * the specified key is held.\n *\n * @param key - The key to check (e.g., 'Shift', 'Control', 'A')\n * @returns True if the key is currently held down\n *\n * @example\n * ```tsx\n * function ShiftIndicator() {\n * const isShiftHeld = useKeyHold('Shift')\n *\n * return (\n * <div style={{ opacity: isShiftHeld ? 1 : 0.5 }}>\n * {isShiftHeld ? 'Shift is pressed!' : 'Press Shift'}\n * </div>\n * )\n * }\n * ```\n *\n * @example\n * ```tsx\n * function ModifierIndicators() {\n * const ctrl = useKeyHold('Control')\n * const shift = useKeyHold('Shift')\n * const alt = useKeyHold('Alt')\n *\n * return (\n * <div>\n * <span style={{ opacity: ctrl ? 1 : 0.3 }}>Ctrl</span>\n * <span style={{ opacity: shift ? 1 : 0.3 }}>Shift</span>\n * <span style={{ opacity: alt ? 1 : 0.3 }}>Alt</span>\n * </div>\n * )\n * }\n * ```\n */\nexport function useKeyHold(key: IndividualKey): boolean {\n const tracker = getKeyStateTracker()\n const normalizedKey = key.toLowerCase()\n\n return useSelector(tracker.store, (state) =>\n state.heldKeys.some((heldKey) => heldKey.toLowerCase() === normalizedKey),\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CA,SAAgB,WAAW,KAA6B;CACtD,MAAM,qDAA8B;CACpC,MAAM,gBAAgB,IAAI,aAAa;AAEvC,+CAAmB,QAAQ,QAAQ,UACjC,MAAM,SAAS,MAAM,YAAY,QAAQ,aAAa,KAAK,cAAc,CAC1E"}
@@ -1,47 +0,0 @@
1
- import { IndividualKey } from "@tanstack/hotkeys";
2
-
3
- //#region src/useKeyHold.d.ts
4
- /**
5
- * React hook that returns whether a specific key is currently being held.
6
- *
7
- * This hook uses `useSelector` from `@tanstack/react-store` to subscribe
8
- * to the global KeyStateTracker and uses a selector to determine if
9
- * the specified key is held.
10
- *
11
- * @param key - The key to check (e.g., 'Shift', 'Control', 'A')
12
- * @returns True if the key is currently held down
13
- *
14
- * @example
15
- * ```tsx
16
- * function ShiftIndicator() {
17
- * const isShiftHeld = useKeyHold('Shift')
18
- *
19
- * return (
20
- * <div style={{ opacity: isShiftHeld ? 1 : 0.5 }}>
21
- * {isShiftHeld ? 'Shift is pressed!' : 'Press Shift'}
22
- * </div>
23
- * )
24
- * }
25
- * ```
26
- *
27
- * @example
28
- * ```tsx
29
- * function ModifierIndicators() {
30
- * const ctrl = useKeyHold('Control')
31
- * const shift = useKeyHold('Shift')
32
- * const alt = useKeyHold('Alt')
33
- *
34
- * return (
35
- * <div>
36
- * <span style={{ opacity: ctrl ? 1 : 0.3 }}>Ctrl</span>
37
- * <span style={{ opacity: shift ? 1 : 0.3 }}>Shift</span>
38
- * <span style={{ opacity: alt ? 1 : 0.3 }}>Alt</span>
39
- * </div>
40
- * )
41
- * }
42
- * ```
43
- */
44
- declare function useKeyHold(key: IndividualKey): boolean;
45
- //#endregion
46
- export { useKeyHold };
47
- //# sourceMappingURL=useKeyHold.d.cts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useKeyHold.js","names":[],"sources":["../src/useKeyHold.ts"],"sourcesContent":["import { useSelector } from '@tanstack/react-store'\nimport { getKeyStateTracker } from '@tanstack/hotkeys'\nimport type { IndividualKey } from '@tanstack/hotkeys'\n\n/**\n * React hook that returns whether a specific key is currently being held.\n *\n * This hook uses `useSelector` from `@tanstack/react-store` to subscribe\n * to the global KeyStateTracker and uses a selector to determine if\n * the specified key is held.\n *\n * @param key - The key to check (e.g., 'Shift', 'Control', 'A')\n * @returns True if the key is currently held down\n *\n * @example\n * ```tsx\n * function ShiftIndicator() {\n * const isShiftHeld = useKeyHold('Shift')\n *\n * return (\n * <div style={{ opacity: isShiftHeld ? 1 : 0.5 }}>\n * {isShiftHeld ? 'Shift is pressed!' : 'Press Shift'}\n * </div>\n * )\n * }\n * ```\n *\n * @example\n * ```tsx\n * function ModifierIndicators() {\n * const ctrl = useKeyHold('Control')\n * const shift = useKeyHold('Shift')\n * const alt = useKeyHold('Alt')\n *\n * return (\n * <div>\n * <span style={{ opacity: ctrl ? 1 : 0.3 }}>Ctrl</span>\n * <span style={{ opacity: shift ? 1 : 0.3 }}>Shift</span>\n * <span style={{ opacity: alt ? 1 : 0.3 }}>Alt</span>\n * </div>\n * )\n * }\n * ```\n */\nexport function useKeyHold(key: IndividualKey): boolean {\n const tracker = getKeyStateTracker()\n const normalizedKey = key.toLowerCase()\n\n return useSelector(tracker.store, (state) =>\n state.heldKeys.some((heldKey) => heldKey.toLowerCase() === normalizedKey),\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CA,SAAgB,WAAW,KAA6B;CACtD,MAAM,UAAU,oBAAoB;CACpC,MAAM,gBAAgB,IAAI,aAAa;AAEvC,QAAO,YAAY,QAAQ,QAAQ,UACjC,MAAM,SAAS,MAAM,YAAY,QAAQ,aAAa,KAAK,cAAc,CAC1E"}
package/dist/utils.cjs DELETED
@@ -1,12 +0,0 @@
1
-
2
- //#region src/utils.ts
3
- /**
4
- * Type guard to check if a value is a React ref-like object.
5
- */
6
- function isRef(value) {
7
- return value !== null && typeof value === "object" && "current" in value;
8
- }
9
-
10
- //#endregion
11
- exports.isRef = isRef;
12
- //# sourceMappingURL=utils.cjs.map
@@ -1 +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.map DELETED
@@ -1 +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"}
@@ -1,58 +0,0 @@
1
- import React, { createContext, useContext, useMemo } from 'react'
2
- import type { ReactNode } from 'react'
3
- import type {
4
- HotkeyRecorderOptions,
5
- HotkeySequenceRecorderOptions,
6
- } from '@tanstack/hotkeys'
7
- import type { UseHotkeyOptions } from './useHotkey'
8
- import type { UseHotkeySequenceOptions } from './useHotkeySequence'
9
-
10
- export interface HotkeysProviderOptions {
11
- hotkey?: Partial<UseHotkeyOptions>
12
- hotkeyRecorder?: Partial<HotkeyRecorderOptions>
13
- hotkeySequence?: Partial<UseHotkeySequenceOptions>
14
- hotkeySequenceRecorder?: Partial<HotkeySequenceRecorderOptions>
15
- }
16
-
17
- interface HotkeysContextValue {
18
- defaultOptions: HotkeysProviderOptions
19
- }
20
-
21
- const HotkeysContext = createContext<HotkeysContextValue | null>(null)
22
-
23
- export interface HotkeysProviderProps {
24
- children: ReactNode
25
- defaultOptions?: HotkeysProviderOptions
26
- }
27
-
28
- const DEFAULT_OPTIONS: HotkeysProviderOptions = {}
29
-
30
- export function HotkeysProvider({
31
- children,
32
- defaultOptions = DEFAULT_OPTIONS,
33
- }: HotkeysProviderProps) {
34
- const contextValue: HotkeysContextValue = useMemo(
35
- () => ({
36
- defaultOptions,
37
- }),
38
- [defaultOptions],
39
- )
40
-
41
- return (
42
- // eslint-disable-next-line @eslint-react/no-context-provider -- React 19+ only; we support React >=16.8
43
- <HotkeysContext.Provider value={contextValue}>
44
- {children}
45
- </HotkeysContext.Provider>
46
- )
47
- }
48
-
49
- export function useHotkeysContext() {
50
- // eslint-disable-next-line @eslint-react/no-use-context -- React 19+ only; we support React >=16.8
51
- return useContext(HotkeysContext)
52
- }
53
-
54
- export function useDefaultHotkeysOptions() {
55
- // eslint-disable-next-line @eslint-react/no-use-context -- React 19+ only; we support React >=16.8
56
- const context = useContext(HotkeysContext)
57
- return context?.defaultOptions ?? {}
58
- }
package/src/index.ts DELETED
@@ -1,18 +0,0 @@
1
- // Re-export everything from the core package
2
- export * from '@tanstack/hotkeys'
3
-
4
- // provider
5
- export * from './HotkeysProvider'
6
-
7
- // React-specific exports
8
- export * from './useHotkey'
9
- export * from './useHotkeys'
10
- export * from './useHeldKeys'
11
- export * from './useHeldKeyCodes'
12
- export * from './useKeyHold'
13
- export * from './useHotkeySequence'
14
- export * from './useHotkeySequences'
15
- export * from './useHotkeyRecorder'
16
- export * from './useHotkeyRegistrations'
17
- export * from './useHotkeySequenceRecorder'
18
- export * from './useHotkeyHint'
@@ -1,33 +0,0 @@
1
- import { useSelector } from '@tanstack/react-store'
2
- import { getKeyStateTracker } from '@tanstack/hotkeys'
3
-
4
- /**
5
- * React hook that returns a map of currently held key names to their physical `event.code` values.
6
- *
7
- * This is useful for debugging which physical key was pressed (e.g. distinguishing
8
- * left vs right Shift via "ShiftLeft" / "ShiftRight").
9
- *
10
- * @returns Record mapping normalized key names to their `event.code` values
11
- *
12
- * @example
13
- * ```tsx
14
- * function KeyDebugDisplay() {
15
- * const heldKeys = useHeldKeys()
16
- * const heldCodes = useHeldKeyCodes()
17
- *
18
- * return (
19
- * <div>
20
- * {heldKeys.map((key) => (
21
- * <kbd key={key}>
22
- * {key} <small>{heldCodes[key]}</small>
23
- * </kbd>
24
- * ))}
25
- * </div>
26
- * )
27
- * }
28
- * ```
29
- */
30
- export function useHeldKeyCodes(): Record<string, string> {
31
- const tracker = getKeyStateTracker()
32
- return useSelector(tracker.store, (state) => state.heldCodes)
33
- }
@@ -1,29 +0,0 @@
1
- import { useSelector } from '@tanstack/react-store'
2
- import { getKeyStateTracker } from '@tanstack/hotkeys'
3
-
4
- /**
5
- * React hook that returns an array of currently held keyboard keys.
6
- *
7
- * This hook uses `useSelector` from `@tanstack/react-store` to subscribe
8
- * to the global KeyStateTracker and updates whenever keys are pressed
9
- * or released.
10
- *
11
- * @returns Array of currently held key names
12
- *
13
- * @example
14
- * ```tsx
15
- * function KeyDisplay() {
16
- * const heldKeys = useHeldKeys()
17
- *
18
- * return (
19
- * <div>
20
- * Currently pressed: {heldKeys.join(' + ') || 'None'}
21
- * </div>
22
- * )
23
- * }
24
- * ```
25
- */
26
- export function useHeldKeys(): Array<string> {
27
- const tracker = getKeyStateTracker()
28
- return useSelector(tracker.store, (state) => state.heldKeys)
29
- }