@keybindy/react 1.1.1 → 1.1.2

package/dist/index.cjs

@@ -7,18 +7,26 @@ var _react = require('react'); var _react2 = _interopRequireDefault(_react);
 
 var _core = require('@keybindy/core'); var _core2 = _interopRequireDefault(_core);
 var sharedInstance = null;
+var getSharedInstance = (options) => {
+  if (typeof window === "undefined") {
+    return null;
+  }
+  if (!sharedInstance) {
+    sharedInstance = new (0, _core2.default)(options);
+  }
+  return sharedInstance;
+};
 var useKeybindy = ({
   logs = false,
   onShortcutFired
 } = {}) => {
-  const managerRef = _react2.default.useRef(null);
-  const registeredIds = _react2.default.useRef(/* @__PURE__ */ new Set());
-  if (!sharedInstance) {
-    sharedInstance = new (0, _core2.default)({ onShortcutFired, silent: !logs });
-  }
-  if (!managerRef.current) {
-    managerRef.current = sharedInstance;
-  }
+  const [manager, setManager] = _react2.default.useState(null);
+  _react2.default.useEffect(() => {
+    if (!manager) {
+      const instance = getSharedInstance({ onShortcutFired, silent: !logs });
+      setManager(instance);
+    }
+  }, []);
   const log = (...args) => {
     if (logs) console.log("[Keybindy]", ...args);
   };
@@ -27,99 +35,136 @@ var useKeybindy = ({
   };
   const register = _react2.default.useCallback(
     (keys, handler, options) => {
+      if (!manager) return;
       if (keys.length === 0) {
         warn("No keys provided to register");
         return;
       }
       const id = _optionalChain([options, 'optionalAccess', _ => _.data, 'optionalAccess', _2 => _2.id]);
-      if (id) registeredIds.current.add(id);
       log("Registered:", _nullishCoalesce(id, () => ( keys)));
-      _optionalChain([managerRef, 'access', _3 => _3.current, 'optionalAccess', _4 => _4.register, 'call', _5 => _5(keys, handler, options)]);
+      manager.register(keys, handler, options);
     },
-    []
+    [manager]
+  );
+  const unregister = _react2.default.useCallback(
+    (keys, scope) => {
+      if (!manager) return;
+      if (keys.length === 0) {
+        warn("No keys provided to unregister");
+        return;
+      }
+      manager.unregister(keys, scope);
+      log("Unregistered:", keys);
+    },
+    [manager]
+  );
+  const enable = _react2.default.useCallback(
+    (keys, scope) => {
+      if (!manager) return;
+      if (keys.length === 0) {
+        warn("No keys provided to enable");
+        return;
+      }
+      manager.enable(keys, scope);
+      log("Enabled:", keys);
+    },
+    [manager]
+  );
+  const disable = _react2.default.useCallback(
+    (keys, scope) => {
+      if (!manager) return;
+      if (keys.length === 0) {
+        warn("No keys provided to disable");
+        return;
+      }
+      manager.disable(keys, scope);
+      log("Disabled:", keys);
+    },
+    [manager]
+  );
+  const toggle = _react2.default.useCallback(
+    (keys, scope) => {
+      if (!manager) return;
+      if (keys.length === 0) {
+        warn("No keys provided to toggle");
+        return;
+      }
+      manager.toggle(keys, scope);
+      log("Toggled:", keys);
+    },
+    [manager]
+  );
+  const getCheatSheet = _react2.default.useCallback(
+    (scope) => {
+      return _optionalChain([manager, 'optionalAccess', _3 => _3.getCheatSheet, 'call', _4 => _4(scope)]);
+    },
+    [manager]
   );
-  const unregister = _react2.default.useCallback((keys, scope) => {
-    if (keys.length === 0) {
-      warn("No keys provided to unregister");
-      return;
-    }
-    _optionalChain([managerRef, 'access', _6 => _6.current, 'optionalAccess', _7 => _7.unregister, 'call', _8 => _8(keys, scope)]);
-    log("Unregistered:", keys);
-  }, []);
-  const enable = _react2.default.useCallback((keys, scope) => {
-    if (keys.length === 0) {
-      warn("No keys provided to enable");
-      return;
-    }
-    _optionalChain([managerRef, 'access', _9 => _9.current, 'optionalAccess', _10 => _10.enable, 'call', _11 => _11(keys, scope)]);
-    log("Enabled:", keys);
-  }, []);
-  const disable = _react2.default.useCallback((keys, scope) => {
-    if (keys.length === 0) {
-      warn("No keys provided to disable");
-      return;
-    }
-    _optionalChain([managerRef, 'access', _12 => _12.current, 'optionalAccess', _13 => _13.disable, 'call', _14 => _14(keys, scope)]);
-    log("Disabled:", keys);
-  }, []);
-  const toggle = _react2.default.useCallback((keys, scope) => {
-    if (keys.length === 0) {
-      warn("No keys provided to toggle");
-      return;
-    }
-    _optionalChain([managerRef, 'access', _15 => _15.current, 'optionalAccess', _16 => _16.toggle, 'call', _17 => _17(keys, scope)]);
-    log("Toggled:", keys);
-  }, []);
-  const getCheatSheet = _react2.default.useCallback((scope) => {
-    return _optionalChain([managerRef, 'access', _18 => _18.current, 'optionalAccess', _19 => _19.getCheatSheet, 'call', _20 => _20(scope)]);
-  }, []);
   const getActiveScope = _react2.default.useCallback(() => {
-    return _nullishCoalesce(_optionalChain([managerRef, 'access', _21 => _21.current, 'optionalAccess', _22 => _22.getActiveScope, 'call', _23 => _23()]), () => ( ""));
-  }, []);
-  const disableAll = _react2.default.useCallback((scope) => {
-    _optionalChain([managerRef, 'access', _24 => _24.current, 'optionalAccess', _25 => _25.disableAll, 'call', _26 => _26(scope)]);
-    log(`Disabled all shortcuts${scope ? ` in scope "${scope}"` : ""}`);
-  }, []);
-  const enableAll = _react2.default.useCallback((scope) => {
-    _optionalChain([managerRef, 'access', _27 => _27.current, 'optionalAccess', _28 => _28.enableAll, 'call', _29 => _29(scope)]);
-    log(`Enabled all shortcuts${scope ? ` in scope "${scope}"` : ""}`);
-  }, []);
-  const setScope = _react2.default.useCallback((scope) => {
-    _optionalChain([managerRef, 'access', _30 => _30.current, 'optionalAccess', _31 => _31.setActiveScope, 'call', _32 => _32(scope)]);
-    log("Scope set to:", scope);
-  }, []);
+    return _optionalChain([manager, 'optionalAccess', _5 => _5.getActiveScope, 'call', _6 => _6()]);
+  }, [manager]);
+  const disableAll = _react2.default.useCallback(
+    (scope) => {
+      _optionalChain([manager, 'optionalAccess', _7 => _7.disableAll, 'call', _8 => _8(scope)]);
+      log(`Disabled all shortcuts${scope ? ` in scope "${scope}"` : ""}`);
+    },
+    [manager]
+  );
+  const enableAll = _react2.default.useCallback(
+    (scope) => {
+      _optionalChain([manager, 'optionalAccess', _9 => _9.enableAll, 'call', _10 => _10(scope)]);
+      log(`Enabled all shortcuts${scope ? ` in scope "${scope}"` : ""}`);
+    },
+    [manager]
+  );
+  const setScope = _react2.default.useCallback(
+    (scope) => {
+      _optionalChain([manager, 'optionalAccess', _11 => _11.setActiveScope, 'call', _12 => _12(scope)]);
+      log("Scope set to:", scope);
+    },
+    [manager]
+  );
   const resetScope = _react2.default.useCallback(() => {
-    _optionalChain([managerRef, 'access', _33 => _33.current, 'optionalAccess', _34 => _34.resetScope, 'call', _35 => _35()]);
+    _optionalChain([manager, 'optionalAccess', _13 => _13.resetScope, 'call', _14 => _14()]);
     log("Reset scope");
-  }, []);
+  }, [manager]);
   const getScopes = _react2.default.useCallback(() => {
-    return _nullishCoalesce(_optionalChain([managerRef, 'access', _36 => _36.current, 'optionalAccess', _37 => _37.getScopes, 'call', _38 => _38()]), () => ( []));
-  }, []);
-  const isScopeActive = _react2.default.useCallback((scope) => {
-    return _optionalChain([managerRef, 'access', _39 => _39.current, 'optionalAccess', _40 => _40.isScopeActive, 'call', _41 => _41(scope)]);
-  }, []);
+    return _optionalChain([manager, 'optionalAccess', _15 => _15.getScopes, 'call', _16 => _16()]);
+  }, [manager]);
+  const isScopeActive = _react2.default.useCallback(
+    (scope) => {
+      return _optionalChain([manager, 'optionalAccess', _17 => _17.isScopeActive, 'call', _18 => _18(scope)]);
+    },
+    [manager]
+  );
   const onTyping = _react2.default.useCallback(
     (callback) => {
-      _optionalChain([managerRef, 'access', _42 => _42.current, 'optionalAccess', _43 => _43.onTyping, 'call', _44 => _44(callback)]);
+      _optionalChain([manager, 'optionalAccess', _19 => _19.onTyping, 'call', _20 => _20(callback)]);
     },
-    []
+    [manager]
   );
   const popScope = _react2.default.useCallback(() => {
-    _optionalChain([managerRef, 'access', _45 => _45.current, 'optionalAccess', _46 => _46.popScope, 'call', _47 => _47()]);
-    log("Popped scope, active scope is:", _optionalChain([managerRef, 'access', _48 => _48.current, 'optionalAccess', _49 => _49.getActiveScope, 'call', _50 => _50()]));
-  }, []);
-  const pushScope = _react2.default.useCallback((scope) => {
-    _optionalChain([managerRef, 'access', _51 => _51.current, 'optionalAccess', _52 => _52.pushScope, 'call', _53 => _53(scope)]);
-    log("Pushed scope:", scope);
-  }, []);
-  const getScopeInfo = _react2.default.useCallback((scope) => {
-    return _optionalChain([managerRef, 'access', _54 => _54.current, 'optionalAccess', _55 => _55.getScopesInfo, 'call', _56 => _56(scope)]);
-  }, []);
+    _optionalChain([manager, 'optionalAccess', _21 => _21.popScope, 'call', _22 => _22()]);
+    log("Popped scope, active scope is:", _optionalChain([manager, 'optionalAccess', _23 => _23.getActiveScope, 'call', _24 => _24()]));
+  }, [manager]);
+  const pushScope = _react2.default.useCallback(
+    (scope) => {
+      _optionalChain([manager, 'optionalAccess', _25 => _25.pushScope, 'call', _26 => _26(scope)]);
+      log("Pushed scope:", scope);
+    },
+    [manager]
+  );
+  const getScopeInfo = _react2.default.useCallback(
+    (scope) => {
+      return _optionalChain([manager, 'optionalAccess', _27 => _27.getScopesInfo, 'call', _28 => _28(scope)]);
+    },
+    [manager]
+  );
   const destroy = () => {
-    _optionalChain([managerRef, 'access', _57 => _57.current, 'optionalAccess', _58 => _58.destroy, 'call', _59 => _59()]);
+    _optionalChain([manager, 'optionalAccess', _29 => _29.destroy, 'call', _30 => _30()]);
   };
   const clear = () => {
-    _optionalChain([managerRef, 'access', _60 => _60.current, 'optionalAccess', _61 => _61.clear, 'call', _62 => _62()]);
+    _optionalChain([manager, 'optionalAccess', _31 => _31.clear, 'call', _32 => _32()]);
   };
   return {
     register,
@@ -141,7 +186,7 @@ var useKeybindy = ({
     enableAll,
     clear,
     disableAll,
-    manager: managerRef.current
+    manager
   };
 };
 
@@ -161,8 +206,11 @@ var Keybindy = ({
   });
   const prevScope = _react2.default.useRef(null);
   _react2.default.useEffect(() => {
-    prevScope.current = manager.getActiveScope();
-    if (!_optionalChain([getScopes, 'call', _63 => _63(), 'optionalAccess', _64 => _64.includes, 'call', _65 => _65(scope)])) {
+    if (!manager) {
+      return;
+    }
+    prevScope.current = _nullishCoalesce(manager.getActiveScope(), () => ( "global"));
+    if (!_optionalChain([getScopes, 'call', _33 => _33(), 'optionalAccess', _34 => _34.includes, 'call', _35 => _35(scope)])) {
       pushScope(scope);
     }
     setScope(scope);
@@ -171,6 +219,8 @@ var Keybindy = ({
     });
     if (disabled) {
       manager.disableAll(scope);
+    } else {
+      manager.enableAll(scope);
     }
     return () => {
       shortcuts.forEach(({ keys }) => {
@@ -182,7 +232,7 @@ var Keybindy = ({
       });
       popScope();
     };
-  }, [scope, JSON.stringify(shortcuts)]);
+  }, [scope, shortcuts, manager, disabled]);
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children });
 };
 

package/dist/index.d.cts

@@ -0,0 +1,188 @@
+import React from 'react';
+import ShortcutManager, { Keys, ShortcutHandler, HoldShortcutHandler, ShortcutOptions, Shortcut } from '@keybindy/core';
+export { KeyBinding, Keys, Shortcut, ShortcutHandler, ShortcutOptions } from '@keybindy/core';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/**
+ * Represents a keyboard shortcut definition.
+ */
+type ShortcutDefinition = {
+    /**
+     * The key combination(s) to listen for.
+     * Can be a single array of keys or an array of key combinations.
+     */
+    keys: Keys[] | Keys[][];
+    /**
+     * Callback function to invoke when the shortcut is triggered.
+     */
+    handler: ShortcutHandler | HoldShortcutHandler;
+    /**
+     * Optional configuration, including scope and other metadata.
+     */
+    options?: Omit<ShortcutOptions, 'scope'>;
+};
+/**
+ * Props for the `<Keybindy />` component.
+ */
+type KeybindyProps = {
+    /**
+     * The scope under which the shortcuts should be active.
+     * This allows managing different contexts for shortcuts.
+     */
+    scope?: 'global' | string;
+    /**
+     * Array of shortcut definitions to register for this scope.
+     */
+    shortcuts?: ShortcutDefinition[];
+    /**
+     * Whether the shortcuts should be disabled for this scope.
+     * Defaults to `false`.
+     */
+    disabled?: boolean;
+    /**
+     * Callback function that will be called when a shortcut is fired.
+     * Receives the fired shortcut info as an argument.
+     */
+    onShortcutFired?: (info: Shortcut) => void;
+    /**
+     * Whether to enable debug logs in the console.
+     */
+    logs?: boolean;
+    /**
+     * The content that will be rendered inside the Shortcut component.
+     */
+    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>;
+
+interface ShortcutLabelProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> {
+    /**
+     * Array of keys to display
+     */
+    keys: Omit<Keys, 'Ctrl (Left)' | 'Ctrl (Right)' | 'Shift (Left)' | 'Shift (Right)' | 'Alt (Left)' | 'Alt (Right)' | 'Meta (Left)' | 'Meta (Right)'>[];
+    /**
+     * Custom render function for each key
+     */
+    renderKey?: (
+    /**
+     * The key to render
+     */
+    key: string, 
+    /**
+     * The index of the key in the array
+     */
+    index: number, 
+    /**
+     * All keys in the array
+     */
+    allKeys: string[]) => React.ReactNode;
+}
+/**
+ * `<ShortcutLabel />` is a utility React component that visually renders a keyboard shortcut label.
+ *
+ * It accepts an array of keys (e.g. `["Ctrl", "S"]`) and renders a styled label using platform-aware
+ * symbols (⌘ for Mac, Ctrl for others). Users can also provide a custom render function to override
+ * the default display logic for advanced layouts or custom themes.
+ *
+ * @component
+ *
+ * @example
+ * // Default usage
+ * <ShortcutLabel keys={['ctrl', 's']} />
+ *
+ * @example
+ * // With custom renderKey
+ * <ShortcutLabel
+ *   keys={['ctrl', 'alt', 'delete']}
+ *   renderKey={(key, i, all) => (
+ *     <>
+ *       <span style={{ color: '#00eaff' }}>{key.toUpperCase()}</span>
+ *       {i < all.length - 1 && <span style={{ opacity: 0.5 }}> + </span>}
+ *     </>
+ *   )}
+ * />
+ *
+ * @param {ShortcutLabelProps} props - Props for the ShortcutLabel component
+ * @param {string[]} props.keys - The list of keys to display.
+ * @param {Function} [props.renderKey] - Optional custom render function for full control over how each key appears.
+ *
+ * @returns {JSX.Element} Rendered shortcut label
+ */
+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;
+    unregister: (keys: Keys[], scope?: string) => void;
+    enable: (keys: Keys[], scope?: string) => void;
+    disable: (keys: Keys[], scope?: string) => void;
+    toggle: (keys: Keys[], scope?: string) => void;
+    setScope: (scope: string) => void;
+    getCheatSheet: (scope?: string) => {
+        keys: string[];
+    }[] | undefined;
+    destroy: () => void;
+    getScopeInfo: (scope?: string) => any;
+    getActiveScope: () => string | undefined;
+    popScope: () => void;
+    pushScope: (scope: string) => void;
+    resetScope: () => void;
+    getScopes: () => string[] | undefined;
+    isScopeActive: (scope: string) => boolean | undefined;
+    onTyping: (callback: (payload: {
+        key: string;
+        event: KeyboardEvent;
+    }) => void) => void;
+    enableAll: (scope?: string) => void;
+    clear: () => void;
+    disableAll: (scope?: string) => void;
+    manager: ShortcutManager | null;
+};
+/**
+ * React hook to manage keyboard shortcuts using a shared instance of `ShortcutManager`.
+ * This hook is safe for server-side rendering (SSR) and will only initialize the manager on the client.
+ *
+ * @param {Object} config - Configuration object.
+ * @param {boolean} [config.logs=false] - Whether to enable debug logs in the console.
+ * @param {(info: Shortcut) => void} [config.onShortcutFired] - Callback for when a shortcut is fired.
+ *
+ * @returns {Object} Object containing shortcut management methods and the manager instance (null on server).
+ */
+declare const useKeybindy: ({ logs, onShortcutFired, }?: {
+    logs?: boolean;
+    onShortcutFired?: (info: Shortcut) => void;
+}) => UseKeybindyReturn;
+
+export { Keybindy, ShortcutLabel, useKeybindy };

package/dist/index.d.ts

@@ -0,0 +1,188 @@
+import React from 'react';
+import ShortcutManager, { Keys, ShortcutHandler, HoldShortcutHandler, ShortcutOptions, Shortcut } from '@keybindy/core';
+export { KeyBinding, Keys, Shortcut, ShortcutHandler, ShortcutOptions } from '@keybindy/core';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/**
+ * Represents a keyboard shortcut definition.
+ */
+type ShortcutDefinition = {
+    /**
+     * The key combination(s) to listen for.
+     * Can be a single array of keys or an array of key combinations.
+     */
+    keys: Keys[] | Keys[][];
+    /**
+     * Callback function to invoke when the shortcut is triggered.
+     */
+    handler: ShortcutHandler | HoldShortcutHandler;
+    /**
+     * Optional configuration, including scope and other metadata.
+     */
+    options?: Omit<ShortcutOptions, 'scope'>;
+};
+/**
+ * Props for the `<Keybindy />` component.
+ */
+type KeybindyProps = {
+    /**
+     * The scope under which the shortcuts should be active.
+     * This allows managing different contexts for shortcuts.
+     */
+    scope?: 'global' | string;
+    /**
+     * Array of shortcut definitions to register for this scope.
+     */
+    shortcuts?: ShortcutDefinition[];
+    /**
+     * Whether the shortcuts should be disabled for this scope.
+     * Defaults to `false`.
+     */
+    disabled?: boolean;
+    /**
+     * Callback function that will be called when a shortcut is fired.
+     * Receives the fired shortcut info as an argument.
+     */
+    onShortcutFired?: (info: Shortcut) => void;
+    /**
+     * Whether to enable debug logs in the console.
+     */
+    logs?: boolean;
+    /**
+     * The content that will be rendered inside the Shortcut component.
+     */
+    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>;
+
+interface ShortcutLabelProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> {
+    /**
+     * Array of keys to display
+     */
+    keys: Omit<Keys, 'Ctrl (Left)' | 'Ctrl (Right)' | 'Shift (Left)' | 'Shift (Right)' | 'Alt (Left)' | 'Alt (Right)' | 'Meta (Left)' | 'Meta (Right)'>[];
+    /**
+     * Custom render function for each key
+     */
+    renderKey?: (
+    /**
+     * The key to render
+     */
+    key: string, 
+    /**
+     * The index of the key in the array
+     */
+    index: number, 
+    /**
+     * All keys in the array
+     */
+    allKeys: string[]) => React.ReactNode;
+}
+/**
+ * `<ShortcutLabel />` is a utility React component that visually renders a keyboard shortcut label.
+ *
+ * It accepts an array of keys (e.g. `["Ctrl", "S"]`) and renders a styled label using platform-aware
+ * symbols (⌘ for Mac, Ctrl for others). Users can also provide a custom render function to override
+ * the default display logic for advanced layouts or custom themes.
+ *
+ * @component
+ *
+ * @example
+ * // Default usage
+ * <ShortcutLabel keys={['ctrl', 's']} />
+ *
+ * @example
+ * // With custom renderKey
+ * <ShortcutLabel
+ *   keys={['ctrl', 'alt', 'delete']}
+ *   renderKey={(key, i, all) => (
+ *     <>
+ *       <span style={{ color: '#00eaff' }}>{key.toUpperCase()}</span>
+ *       {i < all.length - 1 && <span style={{ opacity: 0.5 }}> + </span>}
+ *     </>
+ *   )}
+ * />
+ *
+ * @param {ShortcutLabelProps} props - Props for the ShortcutLabel component
+ * @param {string[]} props.keys - The list of keys to display.
+ * @param {Function} [props.renderKey] - Optional custom render function for full control over how each key appears.
+ *
+ * @returns {JSX.Element} Rendered shortcut label
+ */
+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;
+    unregister: (keys: Keys[], scope?: string) => void;
+    enable: (keys: Keys[], scope?: string) => void;
+    disable: (keys: Keys[], scope?: string) => void;
+    toggle: (keys: Keys[], scope?: string) => void;
+    setScope: (scope: string) => void;
+    getCheatSheet: (scope?: string) => {
+        keys: string[];
+    }[] | undefined;
+    destroy: () => void;
+    getScopeInfo: (scope?: string) => any;
+    getActiveScope: () => string | undefined;
+    popScope: () => void;
+    pushScope: (scope: string) => void;
+    resetScope: () => void;
+    getScopes: () => string[] | undefined;
+    isScopeActive: (scope: string) => boolean | undefined;
+    onTyping: (callback: (payload: {
+        key: string;
+        event: KeyboardEvent;
+    }) => void) => void;
+    enableAll: (scope?: string) => void;
+    clear: () => void;
+    disableAll: (scope?: string) => void;
+    manager: ShortcutManager | null;
+};
+/**
+ * React hook to manage keyboard shortcuts using a shared instance of `ShortcutManager`.
+ * This hook is safe for server-side rendering (SSR) and will only initialize the manager on the client.
+ *
+ * @param {Object} config - Configuration object.
+ * @param {boolean} [config.logs=false] - Whether to enable debug logs in the console.
+ * @param {(info: Shortcut) => void} [config.onShortcutFired] - Callback for when a shortcut is fired.
+ *
+ * @returns {Object} Object containing shortcut management methods and the manager instance (null on server).
+ */
+declare const useKeybindy: ({ logs, onShortcutFired, }?: {
+    logs?: boolean;
+    onShortcutFired?: (info: Shortcut) => void;
+}) => UseKeybindyReturn;
+
+export { Keybindy, ShortcutLabel, useKeybindy };

package/dist/index.mjs

@@ -7,18 +7,26 @@ import React2 from "react";
 import React from "react";
 import ShortcutManager from "@keybindy/core";
 var sharedInstance = null;
+var getSharedInstance = (options) => {
+  if (typeof window === "undefined") {
+    return null;
+  }
+  if (!sharedInstance) {
+    sharedInstance = new ShortcutManager(options);
+  }
+  return sharedInstance;
+};
 var useKeybindy = ({
   logs = false,
   onShortcutFired
 } = {}) => {
-  const managerRef = React.useRef(null);
-  const registeredIds = React.useRef(/* @__PURE__ */ new Set());
-  if (!sharedInstance) {
-    sharedInstance = new ShortcutManager({ onShortcutFired, silent: !logs });
-  }
-  if (!managerRef.current) {
-    managerRef.current = sharedInstance;
-  }
+  const [manager, setManager] = React.useState(null);
+  React.useEffect(() => {
+    if (!manager) {
+      const instance = getSharedInstance({ onShortcutFired, silent: !logs });
+      setManager(instance);
+    }
+  }, []);
   const log = (...args) => {
     if (logs) console.log("[Keybindy]", ...args);
   };
@@ -27,99 +35,136 @@ var useKeybindy = ({
   };
   const register = React.useCallback(
     (keys, handler, options) => {
+      if (!manager) return;
       if (keys.length === 0) {
         warn("No keys provided to register");
         return;
       }
       const id = options?.data?.id;
-      if (id) registeredIds.current.add(id);
       log("Registered:", id ?? keys);
-      managerRef.current?.register(keys, handler, options);
+      manager.register(keys, handler, options);
     },
-    []
+    [manager]
+  );
+  const unregister = React.useCallback(
+    (keys, scope) => {
+      if (!manager) return;
+      if (keys.length === 0) {
+        warn("No keys provided to unregister");
+        return;
+      }
+      manager.unregister(keys, scope);
+      log("Unregistered:", keys);
+    },
+    [manager]
+  );
+  const enable = React.useCallback(
+    (keys, scope) => {
+      if (!manager) return;
+      if (keys.length === 0) {
+        warn("No keys provided to enable");
+        return;
+      }
+      manager.enable(keys, scope);
+      log("Enabled:", keys);
+    },
+    [manager]
+  );
+  const disable = React.useCallback(
+    (keys, scope) => {
+      if (!manager) return;
+      if (keys.length === 0) {
+        warn("No keys provided to disable");
+        return;
+      }
+      manager.disable(keys, scope);
+      log("Disabled:", keys);
+    },
+    [manager]
+  );
+  const toggle = React.useCallback(
+    (keys, scope) => {
+      if (!manager) return;
+      if (keys.length === 0) {
+        warn("No keys provided to toggle");
+        return;
+      }
+      manager.toggle(keys, scope);
+      log("Toggled:", keys);
+    },
+    [manager]
+  );
+  const getCheatSheet = React.useCallback(
+    (scope) => {
+      return manager?.getCheatSheet(scope);
+    },
+    [manager]
   );
-  const unregister = React.useCallback((keys, scope) => {
-    if (keys.length === 0) {
-      warn("No keys provided to unregister");
-      return;
-    }
-    managerRef.current?.unregister(keys, scope);
-    log("Unregistered:", keys);
-  }, []);
-  const enable = React.useCallback((keys, scope) => {
-    if (keys.length === 0) {
-      warn("No keys provided to enable");
-      return;
-    }
-    managerRef.current?.enable(keys, scope);
-    log("Enabled:", keys);
-  }, []);
-  const disable = React.useCallback((keys, scope) => {
-    if (keys.length === 0) {
-      warn("No keys provided to disable");
-      return;
-    }
-    managerRef.current?.disable(keys, scope);
-    log("Disabled:", keys);
-  }, []);
-  const toggle = React.useCallback((keys, scope) => {
-    if (keys.length === 0) {
-      warn("No keys provided to toggle");
-      return;
-    }
-    managerRef.current?.toggle(keys, scope);
-    log("Toggled:", keys);
-  }, []);
-  const getCheatSheet = React.useCallback((scope) => {
-    return managerRef.current?.getCheatSheet(scope);
-  }, []);
   const getActiveScope = React.useCallback(() => {
-    return managerRef.current?.getActiveScope() ?? "";
-  }, []);
-  const disableAll = React.useCallback((scope) => {
-    managerRef.current?.disableAll(scope);
-    log(`Disabled all shortcuts${scope ? ` in scope "${scope}"` : ""}`);
-  }, []);
-  const enableAll = React.useCallback((scope) => {
-    managerRef.current?.enableAll(scope);
-    log(`Enabled all shortcuts${scope ? ` in scope "${scope}"` : ""}`);
-  }, []);
-  const setScope = React.useCallback((scope) => {
-    managerRef.current?.setActiveScope(scope);
-    log("Scope set to:", scope);
-  }, []);
+    return manager?.getActiveScope();
+  }, [manager]);
+  const disableAll = React.useCallback(
+    (scope) => {
+      manager?.disableAll(scope);
+      log(`Disabled all shortcuts${scope ? ` in scope "${scope}"` : ""}`);
+    },
+    [manager]
+  );
+  const enableAll = React.useCallback(
+    (scope) => {
+      manager?.enableAll(scope);
+      log(`Enabled all shortcuts${scope ? ` in scope "${scope}"` : ""}`);
+    },
+    [manager]
+  );
+  const setScope = React.useCallback(
+    (scope) => {
+      manager?.setActiveScope(scope);
+      log("Scope set to:", scope);
+    },
+    [manager]
+  );
   const resetScope = React.useCallback(() => {
-    managerRef.current?.resetScope();
+    manager?.resetScope();
     log("Reset scope");
-  }, []);
+  }, [manager]);
   const getScopes = React.useCallback(() => {
-    return managerRef.current?.getScopes() ?? [];
-  }, []);
-  const isScopeActive = React.useCallback((scope) => {
-    return managerRef.current?.isScopeActive(scope);
-  }, []);
+    return manager?.getScopes();
+  }, [manager]);
+  const isScopeActive = React.useCallback(
+    (scope) => {
+      return manager?.isScopeActive(scope);
+    },
+    [manager]
+  );
   const onTyping = React.useCallback(
     (callback) => {
-      managerRef.current?.onTyping(callback);
+      manager?.onTyping(callback);
     },
-    []
+    [manager]
   );
   const popScope = React.useCallback(() => {
-    managerRef.current?.popScope();
-    log("Popped scope, active scope is:", managerRef.current?.getActiveScope());
-  }, []);
-  const pushScope = React.useCallback((scope) => {
-    managerRef.current?.pushScope(scope);
-    log("Pushed scope:", scope);
-  }, []);
-  const getScopeInfo = React.useCallback((scope) => {
-    return managerRef.current?.getScopesInfo(scope);
-  }, []);
+    manager?.popScope();
+    log("Popped scope, active scope is:", manager?.getActiveScope());
+  }, [manager]);
+  const pushScope = React.useCallback(
+    (scope) => {
+      manager?.pushScope(scope);
+      log("Pushed scope:", scope);
+    },
+    [manager]
+  );
+  const getScopeInfo = React.useCallback(
+    (scope) => {
+      return manager?.getScopesInfo(scope);
+    },
+    [manager]
+  );
   const destroy = () => {
-    managerRef.current?.destroy();
+    manager?.destroy();
   };
   const clear = () => {
-    managerRef.current?.clear();
+    manager?.clear();
   };
   return {
     register,
@@ -141,7 +186,7 @@ var useKeybindy = ({
     enableAll,
     clear,
     disableAll,
-    manager: managerRef.current
+    manager
   };
 };
 
@@ -161,7 +206,10 @@ var Keybindy = ({
   });
   const prevScope = React2.useRef(null);
   React2.useEffect(() => {
-    prevScope.current = manager.getActiveScope();
+    if (!manager) {
+      return;
+    }
+    prevScope.current = manager.getActiveScope() ?? "global";
     if (!getScopes()?.includes(scope)) {
       pushScope(scope);
     }
@@ -171,6 +219,8 @@ var Keybindy = ({
     });
     if (disabled) {
       manager.disableAll(scope);
+    } else {
+      manager.enableAll(scope);
     }
     return () => {
       shortcuts.forEach(({ keys }) => {
@@ -182,7 +232,7 @@ var Keybindy = ({
       });
       popScope();
     };
-  }, [scope, JSON.stringify(shortcuts)]);
+  }, [scope, shortcuts, manager, disabled]);
   return /* @__PURE__ */ jsx(Fragment, { children });
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keybindy/react",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "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",
@@ -51,7 +51,7 @@
   },
   "dependencies": {
     "react": "^19.1.0",
-    "@keybindy/core": "1.1.1"
+    "@keybindy/core": "1.1.2"
   },
   "scripts": {
     "format": "prettier --write \"src/**/*.{ts,tsx}\"",