react-hotkeys-hook

What is react-hotkeys-hook?

The react-hotkeys-hook package is a React hook for handling keyboard shortcuts. It allows developers to easily add keyboard shortcuts to their React applications, making it easier to enhance user interactions and accessibility.

What are react-hotkeys-hook's main functionalities?

Basic Key Binding

This feature allows you to bind a specific key combination to a function. In this example, pressing 'Ctrl+K' will trigger an alert.

```jsx
import React from 'react';
import { useHotkeys } from 'react-hotkeys-hook';

const App = () => {
  useHotkeys('ctrl+k', () => alert('Ctrl+K pressed!'));

  return (
    <div>
      <h1>Press Ctrl+K</h1>
    </div>
  );
};

export default App;
```

Multiple Key Bindings

This feature allows you to bind multiple key combinations to a single function. In this example, pressing either 'Ctrl+K' or 'Ctrl+L' will trigger an alert.

```jsx
import React from 'react';
import { useHotkeys } from 'react-hotkeys-hook';

const App = () => {
  useHotkeys('ctrl+k, ctrl+l', () => alert('Ctrl+K or Ctrl+L pressed!'));

  return (
    <div>
      <h1>Press Ctrl+K or Ctrl+L</h1>
    </div>
  );
};

export default App;
```

Scoped Key Bindings

This feature allows you to bind key combinations within specific scopes. In this example, 'Ctrl+K' can be bound to different functions in different components or contexts.

```jsx
import React from 'react';
import { useHotkeys } from 'react-hotkeys-hook';

const App = () => {
  useHotkeys('ctrl+k', () => alert('Ctrl+K pressed!'), { scopes: ['scope1'] });

  return (
    <div>
      <h1>Press Ctrl+K</h1>
    </div>
  );
};

const AnotherComponent = () => {
  useHotkeys('ctrl+k', () => alert('Ctrl+K pressed in another component!'), { scopes: ['scope2'] });

  return (
    <div>
      <h1>Press Ctrl+K in Another Component</h1>
    </div>
  );
};

export default App;
```

Other packages similar to react-hotkeys-hook

react-hotkeys

react-hotkeys is a mature library for handling keyboard shortcuts in React applications. It provides a more comprehensive API for managing key events and supports nested hotkey scopes. Compared to react-hotkeys-hook, it offers more advanced features but may require more setup.

react-shortcuts

react-shortcuts is another library for handling keyboard shortcuts in React. It focuses on simplicity and ease of use, similar to react-hotkeys-hook. However, it may not offer as many advanced features or customization options as react-hotkeys-hook.

react-keyboard-event-handler

react-keyboard-event-handler is a lightweight library for handling keyboard events in React. It is easy to use and provides basic functionality for key bindings. It is similar to react-hotkeys-hook in terms of simplicity but may lack some of the more advanced features.

README

react-hotkeys-hook

React hook for using keyboard shortcuts in components. This is a hook version for the hotkeys package.

Documentation and live example

https://johannesklauss.github.io/react-hotkeys-hook/

Installation

npm install react-hotkeys-hook

or

yarn add react-hotkeys-hook

Make sure that you have at least version 16.8 of react and react-dom installed, or otherwise hooks won't work for you.

Usage

With TypeScript

export const ExampleComponent: React.FunctionComponent<{}> = () => {
  const [count, setCount] = useState(0);
  useHotkeys('ctrl+k', () => setCount(prevCount => prevCount + 1));

  return (
    <p>
      Pressed {count} times.
    </p>
  );
};

Or plain JS:

export const ExampleComponent = () => {
  const [count, setCount] = useState(0);
  useHotkeys('ctrl+k', () => setCount(prevCount => prevCount + 1));
    
  return (
    <p>
      Pressed {count} times.
    </p>
  );
};

The hook takes care of all the binding and unbinding for you. As soon as the component mounts into the DOM, the key stroke will be listened to. When the component unmounts it will stop listening.

Call Signature

useHotkeys(keys: string, callback: (event: KeyboardEvent, handler: HotkeysEvent) => void)

The useHotkeys hook follows the hotkeys call signature. The callback function takes the exact parameters as the callback function in the hotkeys package. See hotkeys documentation for more info or look into the typings file.

Found an issue or have a feature request?

Open up an issue or pull request and participate.

Authors

• Johannes Klauss

---

MIT License.

---

Changelog

[1.3.3] - 02-May-2019

• Removed console.logs
• tightened source
• Updated docz