!image

react-keybinds

A lightweight library to manage keyboard shortcuts for your React application

Install

#### Using npm

``bash
npm i react-keybinds
`

#### Using Yarn

`bash
yarn add react-keybinds
`

#### Using pnpm

`bash
pnpm add react-keybinds
`

Usage

_{You can take a look at the example}

$3

`tsx
import {KeyBindProvider} from 'react-keybinds';

const App = () => {
return (

hello world

);
};
`

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


By default, the provider will have a debounce on key presses events of 1000ms, you can change this value by passing the debounce prop to the provider

`tsx
const App = () => {
return (

hello world

);
}
`

$3

You can register commands globally

`tsx
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 (

hello world

);
};
`

$3

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.

`tsx
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 (


const App = () => {
return (



);
};
`

You can also register a shortcut when a component is mounted. Like this:

When you use the useRegisterShortcut hook it is necessary to use the useMemo hook
`tsx
import * as React from 'react';
import {useMemo, useState} from 'react';
import {ShortcutType, useKeyBind, useRegisterShortcut} from 'react-keybinds';
import inspire from '../data/inspire';

const RegisterOnMount = () => {
const [text, setText] = useState(inspire[0]);

const {getKeysByPlatform} = useKeyBind();

const shortcut: ShortcutType = useMemo(
() => ({
keys: {
Windows: ['Control', 'Enter'],
},
label: 'Inspired command',
callback: () => {
const randomIndex = Math.floor(Math.random() * inspire.length);
setText(inspire[randomIndex]);
},
}),
[]
);

useRegisterShortcut(shortcut); // register on mount

const keysForInspire = getKeysByPlatform(shortcut);

return (


`

$3

You can list the registered shortcuts using the useKeyBind hook

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

const ShowShortcuts = () => {
const {shortcuts} = useKeyBind();
const shortcutsList = shortcuts?.map((shortcut, index) => {
return (