@keybindy/react/dist/ShortcutLabel.d.ts

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.

import type { Keys } from '@keybindy/core';
import React from 'react';
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
 */
export declare const ShortcutLabel: ({ keys, renderKey, style, ...props }: ShortcutLabelProps) => import("react/jsx-runtime").JSX.Element;
export {};