image

react-keybinds

A lightweight library to manage keyboard shortcuts for your React application

Install

Using npm

npm i react-keybinds

Using Yarn

yarn add react-keybinds

Using pnpm

pnpm add react-keybinds

Usage

You can take a look at the example

1. Configuring the KeyBind provider

import {KeyBindProvider} from 'react-keybinds';

const App = () => {
    return (
        <KeyBindProvider>
            hello world
        </KeyBindProvider>
    );
};

It is recommended that you place the provider at the beginning of the component tree.

2. Global shortcuts

You can register commands globally

import {KeyBindProvider, ShortcutType} from 'react-keybinds';

const GLOBAL_COMMANDS: ShortcutType[] = [
    {
        keys: {
            Mac: ['Control', 'Shift', 'P'],
            Windows: ['Control', 'Shift', 'P'],
        },
        label: 'Test command',
        callback: () => {
            alert('Hello world');
        },
    },
];

const App = () => {
    return (
        <KeyBindProvider shortcuts={GLOBAL_COMMANDS}>
            hello world
        </KeyBindProvider>
    );
};

3. Register shortcuts

You can register a command in a specific part of your application. This is useful when we want to execute logic from a handler that exists in a specific component.

import {KeyBindProvider, useKeyBind} from 'react-keybinds';

const RegisterShortcutButton = () => {
    const {registerShortcut} = useKeyBind();

    const handleClickRegister = () => {
        registerShortcut({
            keys: {
                Mac: ['Shift', '*', '_'],
            },
            label: 'This is a keyboard shortcut',
            callback: () => {
                alert('Hello world');
            },
        });
    };

    return (
        <div>
            <button onClick={handleClickRegister}>Register shortcut</button>
        </div>
    );
};

const App = () => {
    return (
        <KeyBindProvider>
            <RegisterShortcutButton/>
        </KeyBindProvider>
    );
};

4. List registered shortcuts

You can list the registered shortcuts using the useKeyBind hook

import {KeyBindProvider, useKeyBind} from 'react-keybinds';

const ShowShortcuts = () => {
    const {shortcuts} = useKeyBind();
    const shortcutsList = shortcuts?.map((shortcut, index) => {
        return (
            <div key={index}>
                <span>{shortcut.label}</span>
                <ul>
                    {Object.entries(shortcut.keys).map(([key, values], i) => (
                        <li key={`${key}-${i}`}>
                            {key}: <strong>{values.join(' + ')}</strong>
                        </li>
                    ))}
                </ul>
            </div>
        );
    });
    return (
        <div>
            <h1>Registered Shortcuts</h1>
            {shortcutsList}
        </div>
    );
};
const App = () => {
    return (
        <KeyBindProvider>
            <ShowShortcuts/>
        </KeyBindProvider>
    );
};

GitHub

View Github