@keybindy/react/dist/Keybindy.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 React from 'react';
import type { Keys, Shortcut as ShortcutType, ShortcutHandler, ShortcutOptions } from '@keybindy/core';
/**
 * 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;
    /**
     * 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: 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: ShortcutType) => 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.
 */
export declare const Keybindy: React.FC<KeybindyProps>;
export {};