@keybindy/react 1.1.3 → 1.1.5

package/README.md

@@ -109,27 +109,27 @@ A powerful hook that gives you full control over the shortcut system via the Sho
 
 ##### Available methods
 
-| Method                                                                | Description                                  |
-| --------------------------------------------------------------------- | -------------------------------------------- |
-| [`register()`](https://github.com/keybindy/core#register)             | Register a shortcut                          |
-| [`unregister()`](https://github.com/keybindy/core#unregister)         | Unregister a shortcut                        |
-| [`enable()`](https://github.com/keybindy/core#enable--disable--toggle)                 | Enable a specific shortcut                   |
-| [`disable()`](https://github.com/keybindy/core#enable--disable--toggle)               | Disable a specific shortcut                  |
-| [`toggle()`](https://github.com/keybindy/core#enable--disable--toggle)                 | Toggle a shortcut on/off                     |
-| [`enableAll()`](https://github.com/keybindy/core#enableall--disableall)           | Enable all shortcuts (global or scoped)      |
-| [`disableAll()`](https://github.com/keybindy/core#enableall--disableall)         | Disable all shortcuts (global or scoped)     |
-| [`setScope()`](https://github.com/keybindy/core#setactivescope)       | Set the active scope                         |
-| [`resetScope()`](https://github.com/keybindy/core#resetScope)         | Reset to default scope                       |
-| [`getScopes()`](https://github.com/keybindy/core#getScopes)           | Get all defined scopes                       |
-| [`getActiveScope()`](https://github.com/keybindy/core#getActiveScope) | Get the current active scope                 |
-| [`popScope()`](https://github.com/keybindy/core#popScope)             | Remove the top scope from the scope stack    |
-| [`pushScope()`](https://github.com/keybindy/core#pushScope)           | Push a new scope onto the scope stack        |
-| [`getCheatSheet()`](https://github.com/keybindy/core#getCheatsheet)   | Retrieve all shortcuts (optionally by scope) |
-| [`onTyping()`](https://github.com/keybindy/core#onTyping)             | Listen to every key press                    |
-| [`destroy()`](https://github.com/keybindy/core#destroy)               | Tear down the current manager instance       |
-| [`clear()`](https://github.com/keybindy/core#clear)                   | Unregister all shortcuts                     |
-| [`getScopeInfo()`](https://github.com/keybindy/core#getScopeInfo)     | Retrieve metadata about a specific scope     |
-| [`isScopeActive()`](https://github.com/keybindy/core#isScopeActive)   | Check if a scope is currently active         |
+| Method                                                                   | Description                                  |
+| ------------------------------------------------------------------------ | -------------------------------------------- |
+| [`register()`](https://github.com/keybindy/core#register)                | Register a shortcut                          |
+| [`unregister()`](https://github.com/keybindy/core#unregister)            | Unregister a shortcut                        |
+| [`enable()`](https://github.com/keybindy/core#enable--disable--toggle)   | Enable a specific shortcut                   |
+| [`disable()`](https://github.com/keybindy/core#enable--disable--toggle)  | Disable a specific shortcut                  |
+| [`toggle()`](https://github.com/keybindy/core#enable--disable--toggle)   | Toggle a shortcut on/off                     |
+| [`enableAll()`](https://github.com/keybindy/core#enableall--disableall)  | Enable all shortcuts (global or scoped)      |
+| [`disableAll()`](https://github.com/keybindy/core#enableall--disableall) | Disable all shortcuts (global or scoped)     |
+| [`setScope()`](https://github.com/keybindy/core#setactivescope)          | Set the active scope                         |
+| [`resetScope()`](https://github.com/keybindy/core#resetScope)            | Reset to default scope                       |
+| [`getScopes()`](https://github.com/keybindy/core#getScopes)              | Get all defined scopes                       |
+| [`getActiveScope()`](https://github.com/keybindy/core#getActiveScope)    | Get the current active scope                 |
+| [`popScope()`](https://github.com/keybindy/core#popScope)                | Remove the top scope from the scope stack    |
+| [`pushScope()`](https://github.com/keybindy/core#pushScope)              | Push a new scope onto the scope stack        |
+| [`getCheatSheet()`](https://github.com/keybindy/core#getCheatsheet)      | Retrieve all shortcuts (optionally by scope) |
+| [`onTyping()`](https://github.com/keybindy/core#onTyping)                | Listen to every key press                    |
+| [`destroy()`](https://github.com/keybindy/core#destroy)                  | Tear down the current manager instance       |
+| [`clear()`](https://github.com/keybindy/core#clear)                      | Unregister all shortcuts                     |
+| [`getScopeInfo()`](https://github.com/keybindy/core#getScopeInfo)        | Retrieve metadata about a specific scope     |
+| [`isScopeActive()`](https://github.com/keybindy/core#isScopeActive)      | Check if a scope is currently active         |
 
 > _All methods mirror `@keybindy/core` with a React-friendly API._
 

package/dist/Keybindy.js

@@ -2,59 +2,43 @@ import { jsx, Fragment } from 'react/jsx-runtime';
 import React from 'react';
 import { useKeybindy } from './useKeybindy.js';
 
-/**
- * `<Keybindy />` is a React component that registers keyboard shortcuts within a given scope. It allows
- * users to define custom shortcuts and their associated handlers, while managing scope-based shortcut behavior.
- * The component listens for keyboard events and triggers the registered handler when the corresponding keys are pressed.
- * It also provides an optional callback (`onShortcutFired`) to notify users when a shortcut is triggered.
- *
- * @component
- *
- * @example
- * // Basic usage
- * <Keybindy scope="global" shortcuts={[{ keys: ['ctrl', 's'], handler: saveDocument }]} >
- *   <div>Content with shortcuts</div>
- * </Keybindy>
- *
- * @example
- * // With custom callback for onShortcutFired
- * <Keybindy
- *   scope="editor"
- *   shortcuts={[{ keys: ['ctrl', 'e'], handler: editDocument }]}
- *   onShortcutFired={(info) => console.log('Shortcut fired:', info)}
- * >
- *   <div>Editor with shortcuts</div>
- * </Keybindy>
- *
- * @param {ShortcutProps} props - Props for the Shortcut component.
- * @param {string} props.scope - The scope under which the shortcuts should be active.
- * @param {ShortcutDefinition[]} [props.shortcuts] - An array of shortcut definitions, each containing keys, handler, and options.
- * @param {boolean} [props.disabled=false] - Whether the shortcuts should be disabled for this scope.
- * @param {(info: Shortcut) => void} [props.onShortcutFired] - Optional callback triggered when a shortcut is fired, providing the shortcut info.
- * @param {React.ReactNode} props.children - The children to be rendered inside the component, which can contain any JSX elements.
- *
- * @returns {JSX.Element} The rendered component with registered shortcuts within the provided scope.
- */
-const Keybindy = ({ scope = 'global', shortcuts = [], children, disabled, onShortcutFired, logs = false, }) => {
+const KeybindyComponent = ({ scope = 'global', shortcuts = [], children, disabled, onShortcutFired, logs = false, }) => {
     const { register, unregister, manager, pushScope, popScope, getScopes, setScope } = useKeybindy({
         onShortcutFired,
         logs,
     });
-    const prevScope = React.useRef(null);
+    // Memoize a stable representation of shortcuts, excluding the handler.
+    // This prevents the effect from re-running unnecessarily.
+    const stableShortcuts = React.useMemo(() => {
+        return shortcuts.map(({ keys, options }) => ({ keys, options }));
+    }, [JSON.stringify(shortcuts.map(s => ({ keys: s.keys, options: s.options })))]);
+    // Use a ref to store the latest handlers, preventing re-renders from causing issues.
+    const handlersRef = React.useRef({});
+    React.useEffect(() => {
+        handlersRef.current = shortcuts.reduce((acc, { keys, handler }) => {
+            const key = JSON.stringify(keys);
+            acc[key] = handler;
+            return acc;
+        }, {});
+    });
     React.useEffect(() => {
         if (!manager) {
             return;
         }
-        prevScope.current = manager.getActiveScope() ?? 'global';
-        // Add scope if doesn't exist
         if (!getScopes()?.includes(scope)) {
             pushScope(scope);
         }
-        // Set this scope as active
         setScope(scope);
-        // Register all shortcuts for this scope
-        shortcuts.forEach(({ keys, handler, options }) => {
-            register(keys, handler, { ...options, scope });
+        // Register shortcuts using the stable definitions.
+        stableShortcuts.forEach(({ keys, options }) => {
+            const stableHandler = (event, state) => {
+                const key = JSON.stringify(keys);
+                const currentHandler = handlersRef.current[key];
+                if (currentHandler) {
+                    currentHandler(event, state);
+                }
+            };
+            register(keys, stableHandler, { ...options, scope });
         });
         if (disabled) {
             manager.disableAll(scope);
@@ -63,7 +47,8 @@ const Keybindy = ({ scope = 'global', shortcuts = [], children, disabled, onShor
             manager.enableAll(scope);
         }
         return () => {
-            shortcuts.forEach(({ keys }) => {
+            // Unregister using the same stable definitions.
+            stableShortcuts.forEach(({ keys }) => {
                 if (Array.isArray(keys[0])) {
                     keys.forEach(key => unregister(key, scope));
                 }
@@ -73,8 +58,9 @@ const Keybindy = ({ scope = 'global', shortcuts = [], children, disabled, onShor
             });
             popScope();
         };
-    }, [scope, shortcuts, manager, disabled]);
+    }, [scope, manager, disabled, stableShortcuts]);
     return jsx(Fragment, { children: children });
 };
+const Keybindy = React.memo(KeybindyComponent);
 
 export { Keybindy };

package/dist/index.d.ts

@@ -1,12 +1,12 @@
 import React from 'react';
-import ShortcutManager, { Keys, ShortcutHandler, HoldShortcutHandler, ShortcutOptions, Shortcut } from '@keybindy/core';
-export { KeyBinding, Keys, Shortcut, ShortcutHandler, ShortcutOptions } from '@keybindy/core';
+import ShortcutManager, { Keys, ShortcutHandler, ShortcutOptions, Shortcut } from '@keybindy/core';
+export { Keys, Shortcut, ShortcutOptions } from '@keybindy/core';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 /**
- * Represents a keyboard shortcut definition.
+ * Represents a shortcut definition for the `<Keybindy />` component.
  */
-type ShortcutDefinition = {
+type KeybindyShortcut = {
     /**
      * The key combination(s) to listen for.
      * Can be a single array of keys or an array of key combinations.
@@ -15,12 +15,13 @@ type ShortcutDefinition = {
     /**
      * Callback function to invoke when the shortcut is triggered.
      */
-    handler: ShortcutHandler | HoldShortcutHandler;
+    handler: ShortcutHandler;
     /**
      * Optional configuration, including scope and other metadata.
      */
     options?: Omit<ShortcutOptions, 'scope'>;
 };
+
 /**
  * Props for the `<Keybindy />` component.
  */
@@ -33,7 +34,7 @@ type KeybindyProps = {
     /**
      * Array of shortcut definitions to register for this scope.
      */
-    shortcuts?: ShortcutDefinition[];
+    shortcuts?: KeybindyShortcut[];
     /**
      * Whether the shortcuts should be disabled for this scope.
      * Defaults to `false`.
@@ -53,40 +54,7 @@ type KeybindyProps = {
      */
     children?: React.ReactNode;
 };
-/**
- * `<Keybindy />` is a React component that registers keyboard shortcuts within a given scope. It allows
- * users to define custom shortcuts and their associated handlers, while managing scope-based shortcut behavior.
- * The component listens for keyboard events and triggers the registered handler when the corresponding keys are pressed.
- * It also provides an optional callback (`onShortcutFired`) to notify users when a shortcut is triggered.
- *
- * @component
- *
- * @example
- * // Basic usage
- * <Keybindy scope="global" shortcuts={[{ keys: ['ctrl', 's'], handler: saveDocument }]} >
- *   <div>Content with shortcuts</div>
- * </Keybindy>
- *
- * @example
- * // With custom callback for onShortcutFired
- * <Keybindy
- *   scope="editor"
- *   shortcuts={[{ keys: ['ctrl', 'e'], handler: editDocument }]}
- *   onShortcutFired={(info) => console.log('Shortcut fired:', info)}
- * >
- *   <div>Editor with shortcuts</div>
- * </Keybindy>
- *
- * @param {ShortcutProps} props - Props for the Shortcut component.
- * @param {string} props.scope - The scope under which the shortcuts should be active.
- * @param {ShortcutDefinition[]} [props.shortcuts] - An array of shortcut definitions, each containing keys, handler, and options.
- * @param {boolean} [props.disabled=false] - Whether the shortcuts should be disabled for this scope.
- * @param {(info: Shortcut) => void} [props.onShortcutFired] - Optional callback triggered when a shortcut is fired, providing the shortcut info.
- * @param {React.ReactNode} props.children - The children to be rendered inside the component, which can contain any JSX elements.
- *
- * @returns {JSX.Element} The rendered component with registered shortcuts within the provided scope.
- */
-declare const Keybindy: React.FC<KeybindyProps>;
+declare const Keybindy: React.NamedExoticComponent<KeybindyProps>;
 
 interface ShortcutLabelProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> {
     /**
@@ -144,7 +112,7 @@ interface ShortcutLabelProps extends React.DetailedHTMLProps<React.HTMLAttribute
 declare const ShortcutLabel: ({ keys, renderKey, style, ...props }: ShortcutLabelProps) => react_jsx_runtime.JSX.Element;
 
 type UseKeybindyReturn = {
-    register: (keys: Keys[] | Keys[][], handler: ShortcutHandler | HoldShortcutHandler, options?: ShortcutOptions) => void;
+    register: (keys: Keys[] | Keys[][], handler: ShortcutHandler, options?: ShortcutOptions) => void;
     unregister: (keys: Keys[], scope?: string) => void;
     enable: (keys: Keys[], scope?: string) => void;
     disable: (keys: Keys[], scope?: string) => void;
@@ -186,3 +154,4 @@ declare const useKeybindy: ({ logs, onShortcutFired, }?: {
 }) => UseKeybindyReturn;
 
 export { Keybindy, ShortcutLabel, useKeybindy };
+export type { KeybindyShortcut };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keybindy/react",
-  "version": "1.1.3",
+  "version": "1.1.5",
   "description": "Keybindy for React: Simple, scoped keyboard shortcuts that require little setup. designed to smoothly blend in with your React applications, allowing for robust keybinding functionality without the overhead.",
   "author": {
     "name": "PRASSamin",
@@ -17,13 +17,13 @@
   "license": "MIT",
   "sideEffects": false,
   "type": "module",
-  "main": "dist/index.cjs",
-  "module": "dist/index.mjs",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {
     ".": {
-      "require": "./dist/index.cjs",
-      "import": "./dist/index.mjs"
+      "require": "./dist/index.js",
+      "import": "./dist/index.js"
     }
   },
   "files": [
@@ -51,7 +51,7 @@
   },
   "dependencies": {
     "react": "^19.1.0",
-    "@keybindy/core": "1.1.3"
+    "@keybindy/core": "1.1.4"
   },
   "scripts": {
     "format": "prettier --write \"src/**/*.{ts,tsx}\"",