@keybindy/react 1.1.8 → 1.1.10

package/dist/ShortcutLabel.js

@@ -2,13 +2,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import React from 'react';
 
 /**
- * `<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
+ * ... (rest of the description) ...
  *
  * @example
  * // Default usage
@@ -19,24 +13,45 @@ import React from 'react';
  * <ShortcutLabel keys={[['ctrl', 's'], ['meta', 's']]} />
  *
  * @example
- * // With custom renderKey
+ * // With custom render prop
+ * <ShortcutLabel
+ *   keys={['ctrl', 'shift', 'a']}
+ *   render={(keys) => {
+ *     // 'keys' here will be ['ctrl', 'shift', 'a']
+ *     return keys.map((key) => (
+ *       <span key={key} style={{ color: '#00eaff' }}>
+ *         {key.toUpperCase()}
+ *       </span>
+ *     ));
+ *   }}
+ * />
+ *
+ * @example
+ * // With custom render prop for multiple bindings
  * <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>}
- *     </>
- *   )}
+ *   keys={[['ctrl', 's'], ['meta', 's']]}
+ *   render={(bindings) => {
+ *     // 'bindings' here will be [['ctrl', 's'], ['meta', 's']]
+ *     return bindings.map((binding, bindingIndex) => (
+ *       <React.Fragment key={bindingIndex}>
+ *         {binding.map((key, keyIndex) => (
+ *           <span key={keyIndex} style={{ fontWeight: 'bold' }}>
+ *             {key}
+ *           </span>
+ *         ))}
+ *         {bindingIndex < bindings.length - 1 && ' or '}
+ *       </React.Fragment>
+ *     ));
+ *   }}
  * />
  *
  * @param {ShortcutLabelProps} props - Props for the ShortcutLabel component
  * @param {string[] | 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.
+ * @param {Function} [props.render] - Optional custom render function for full control over how your keys are rendered.
  *
  * @returns {JSX.Element} Rendered shortcut label
  */
-const ShortcutLabel = ({ keys, renderKey, style, ...props }) => {
+const ShortcutLabel = ({ keys, render, style, ...props }) => {
     const isMac = typeof navigator !== 'undefined' && /Mac/.test(navigator.userAgent);
     const defaultRenderKey = (key) => {
         switch (key.toLowerCase()) {
@@ -54,9 +69,9 @@ const ShortcutLabel = ({ keys, renderKey, style, ...props }) => {
                 return key.toUpperCase();
         }
     };
-    const renderSingleBinding = (binding) => {
-        if (renderKey) {
-            return binding.map((key, i) => (jsx(React.Fragment, { children: renderKey(key, i, binding) }, i)));
+    const renderBinding = (binding) => {
+        if (render) {
+            return render(binding);
         }
         return binding.map(key => defaultRenderKey(key)).join(' + ');
     };
@@ -70,8 +85,10 @@ const ShortcutLabel = ({ keys, renderKey, style, ...props }) => {
             userSelect: 'none',
             ...style,
         }, ...props, children: isNestedArray
-            ? keys.map((binding, index) => (jsxs(React.Fragment, { children: [renderSingleBinding(binding), index < keys.length - 1 && ' / '] }, index)))
-            : renderSingleBinding(keys) }));
+            ? render
+                ? renderBinding(keys)
+                : keys.map((binding, index) => (jsxs(React.Fragment, { children: [renderBinding(binding), index < keys.length - 1 && ' / '] }, index)))
+            : renderBinding(keys) }));
 };
 
 export { ShortcutLabel };

package/dist/index.d.ts

@@ -63,30 +63,14 @@ interface ShortcutLabelProps extends React.DetailedHTMLProps<React.HTMLAttribute
      */
     keys: AllowedKeys[] | AllowedKeys[][];
     /**
-     * Custom render function for each key
+     * Custom render function for full control over how your keys are rendered.
+     * This function receives the entire `keys` array (either `string[]` or `string[][]`)
+     * and should return the ReactNode to be displayed.
      */
-    renderKey?: (
-    /**
-     * The key to render
-     */
-    key: string, 
-    /**
-     * The index of the key in the array
-     */
-    index: number, 
-    /**
-     * All keys in the current binding
-     */
-    allKeys: string[]) => React.ReactNode;
+    render?: (keys: AllowedKeys[] | AllowedKeys[][]) => 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
+ * ... (rest of the description) ...
  *
  * @example
  * // Default usage
@@ -97,24 +81,45 @@ interface ShortcutLabelProps extends React.DetailedHTMLProps<React.HTMLAttribute
  * <ShortcutLabel keys={[['ctrl', 's'], ['meta', 's']]} />
  *
  * @example
- * // With custom renderKey
+ * // With custom render prop
+ * <ShortcutLabel
+ *   keys={['ctrl', 'shift', 'a']}
+ *   render={(keys) => {
+ *     // 'keys' here will be ['ctrl', 'shift', 'a']
+ *     return keys.map((key) => (
+ *       <span key={key} style={{ color: '#00eaff' }}>
+ *         {key.toUpperCase()}
+ *       </span>
+ *     ));
+ *   }}
+ * />
+ *
+ * @example
+ * // With custom render prop for multiple bindings
  * <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>}
- *     </>
- *   )}
+ *   keys={[['ctrl', 's'], ['meta', 's']]}
+ *   render={(bindings) => {
+ *     // 'bindings' here will be [['ctrl', 's'], ['meta', 's']]
+ *     return bindings.map((binding, bindingIndex) => (
+ *       <React.Fragment key={bindingIndex}>
+ *         {binding.map((key, keyIndex) => (
+ *           <span key={keyIndex} style={{ fontWeight: 'bold' }}>
+ *             {key}
+ *           </span>
+ *         ))}
+ *         {bindingIndex < bindings.length - 1 && ' or '}
+ *       </React.Fragment>
+ *     ));
+ *   }}
  * />
  *
  * @param {ShortcutLabelProps} props - Props for the ShortcutLabel component
  * @param {string[] | 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.
+ * @param {Function} [props.render] - Optional custom render function for full control over how your keys are rendered.
  *
  * @returns {JSX.Element} Rendered shortcut label
  */
-declare const ShortcutLabel: ({ keys, renderKey, style, ...props }: ShortcutLabelProps) => react_jsx_runtime.JSX.Element;
+declare const ShortcutLabel: ({ keys, render, style, ...props }: ShortcutLabelProps) => react_jsx_runtime.JSX.Element;
 
 type UseKeybindyReturn = {
     register: (keys: Keys[] | Keys[][], handler: ShortcutHandler, options?: ShortcutOptions) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keybindy/react",
-  "version": "1.1.8",
+  "version": "1.1.10",
   "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",