@tanstack/react-hotkeys 0.20.1 → 0.20.2

package/dist/useHotkeyRecorder.js

@@ -3,7 +3,7 @@
 import { useDefaultHotkeysOptions } from "./HotkeysProvider.js";
 import { useSelector } from "./_useSelector.js";
 import { HotkeyRecorder } from "@tanstack/hotkeys";
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import { withDefaults } from "@tanstack/hotkeys/adapter";
 
 //#region src/useHotkeyRecorder.ts
@@ -21,14 +21,17 @@ function useHotkeyRecorder(options) {
 			recorderRef.current?.destroy();
 		};
 	}, []);
-	return {
-		isRecording,
-		steps,
-		recordedHotkey,
+	const [actions] = useState(() => ({
 		startRecording: () => recorderRef.current?.start(),
 		stopRecording: () => recorderRef.current?.stop(),
 		cancelRecording: () => recorderRef.current?.cancel(),
 		commitRecording: () => recorderRef.current?.commit()
+	}));
+	return {
+		isRecording,
+		steps,
+		recordedHotkey,
+		...actions
 	};
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-hotkeys",
-  "version": "0.20.1",
+  "version": "0.20.2",
   "description": "React adapter for TanStack Hotkeys",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -35,7 +35,7 @@
     "skills"
   ],
   "dependencies": {
-    "@tanstack/hotkeys": "0.22.0"
+    "@tanstack/hotkeys": "0.22.1"
   },
   "devDependencies": {
     "@eslint-react/eslint-plugin": "^4.2.3",

package/skills/react-hotkeys/SKILL.md

@@ -101,7 +101,8 @@ A hook uses the nearest `HotkeysProvider` above its component. Registering `Esca
 
 ## Pitfalls
 
-- **Pass the ref, not `ref.current`.** `target: listRef.current` is `null` on the first render, and a `null` target registers nothing, so the hotkey doesn't work until the component renders again. Pass `target: listRef`; a ref that is still empty waits for its element.
+- **Pass the ref, not `ref.current`.** `target: listRef.current` is `null` on the first render, and a `null` target registers nothing, so the hotkey doesn't work until the component renders again. Pass `target: listRef` for an element the component always renders.
+- **Keep elements that mount later in state.** The hook reads a ref only after its component renders, so it misses an element that mounts later, such as one a child shows from its own state. Use `const [el, setEl] = useState<HTMLElement | null>(null)`, `target: el`, and `ref={setEl}`; the hotkey registers when the element mounts and unregisters when it unmounts.
 - **No dependency arrays or `useCallback`.** The hooks read the hotkey, callback, and options on every render, so inline callbacks always see current state.
 - **Call the hooks directly.** A `useShortcut(keys: string)` wrapper has to cast strings to hotkeys, which turns off type checking and drops sequences, options, app hotkeys, and the typed callback context.
 - **`matchesKeyboardEvent` takes the DOM event.** In a widget's `onKeyDown`, pass `event.nativeEvent`.