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

---

useHotkeys(keys, callback)

npm i react-hotkeys-hook

A React hook for using keyboard shortcuts in components in a declarative way.

---

Quick Start

The easiest way to use the hook.

import { useHotkeys } from 'react-hotkeys-hook'

export const ExampleComponent = () => {
  const [count, setCount] = useState(0)
  useHotkeys('ctrl+k', () => setCount(prevCount => prevCount + 1))

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

Scopes

Scopes allow you to group hotkeys together. You can use scopes to prevent hotkeys from colliding with each other.

const App = () => {
  return (
    <HotkeysProvider initiallyActiveScopes={['settings']}>
      <ExampleComponent />
    </HotkeysProvider>
  )
}

export const ExampleComponent = () => {
  const [count, setCount] = useState(0)
  useHotkeys('ctrl+k', () => setCount(prevCount => prevCount + 1), { scopes: ['settings'] })

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

Changing a scope's active state

You can change the active state of a scope using the deactivateScope, activateScope and toggleScope functions returned by the useHotkeysContext() hook. Note that you have to have your app wrapped in a <HotkeysProvider> component.

const App = () => {
  return (
          <HotkeysProvider initiallyActiveScopes={['settings']}>
            <ExampleComponent />
          </HotkeysProvider>
  )
}

export const ExampleComponent = () => {
  const { toggleScope } = useHotkeysContext()

  return (
    <button onClick={() => toggleScope('settings')}>
      Change scope active state
    </button>
  )
}

Focus trap

This will only trigger the hotkey if the component is focused.

export const ExampleComponent = () => {
  const [count, setCount] = useState(0)
  const ref = useHotkeys<HTMLParagraphElement>('ctrl+k', () => setCount(prevCount => prevCount + 1))

  return (
    <p tabIndex={-1} ref={ref}>
      Pressed {count} times.
    </p>
  )
}

Documentation & Live Examples

• Quick Start
• Documentation
• API

API

useHotkeys(keys, callback)

useHotkeys(keys: string | string[], callback: (event: KeyboardEvent, handler: HotkeysEvent) => void, options: Options = {}, deps: DependencyList = [])

Parameter	Type	Required?	Default value	Description
keys	string or string[]	required	-	set the hotkeys you want the hook to listen to. You can use single or multiple keys, modifier combinations, etc. This will either be a string or an array of strings. To separate multiple keys, use a colon. This split key value can be overridden with the splitKey option.
callback	(event: KeyboardEvent, handler: HotkeysEvent) => void	required	-	This is the callback function that will be called when the hotkey is pressed. The callback will receive the browsers native KeyboardEvent and the libraries HotkeysEvent.
options	Options	optional	{}	Object to modify the behavior of the hook. Default options are given below.
dependencies	DependencyList	optional	[]	The given callback will always be memoised inside the hook. So if you reference any outside variables, you need to set them here for the callback to get updated (Much like useCallback works in React).

Options

All options are optional and have a default value which you can override to change the behavior of the hook.

Option	Type	Default value	Description
enabled	boolean or (keyboardEvent: KeyboardEvent, hotkeysEvent: HotkeysEvent) => boolean	true	This option determines whether the hotkey is active or not. It can take a boolean (for example a flag from a state outside) or a function which gets executed once the hotkey is pressed. If the function returns false the hotkey won't get executed and all browser events are prevented.
enableOnFormTags	boolean or FormTags[]	false	By default hotkeys are not registered if a focus focuses on an input field. This will prevent accidental triggering of hotkeys when the user is typing. If you want to enable hotkeys, use this option. Setting it to true will enable on all form tags, otherwise you can give an array of form tags to enable the hotkey on (possible options are: ['input', 'textarea', 'select'])
enableOnContentEditable	boolean	false	Set this option to enable hotkeys on tags that have set the contentEditable prop to true
combinationKey	string	+	Character to indicate keystrokes like shift+c. You might want to change this if you want to listen to the + character like ctrl-+.
splitKey	string	,	Character to separate different keystrokes like ctrl+a, ctrl+b.
scopes	string or string[]	*	With scopes you can group hotkeys together. The default scope is the wildcard * which matches all hotkeys. Use the <HotkeysProvider> component to change active scopes.
keyup	boolean	false	Determines whether to listen to the browsers keyup event for triggering the callback.
keydown	boolean	true	Determines whether to listen to the browsers keydown event for triggering the callback. If you set both keyupand keydown to true, the callback will trigger on both events.
preventDefault	boolean or (keyboardEvent: KeyboardEvent, hotkeysEvent: HotkeysEvent) => boolean	false	Set this to a true if you want the hook to prevent the browsers default behavior on certain keystrokes like meta+s to save a page. NOTE: Certain keystrokes are not preventable, like meta+w to close a tab in chrome.
description	string	undefined	Use this option to describe what the hotkey does. this is helpful if you want to display a list of active hotkeys to the user.

Overloads

The hooks call signature is very flexible. For example if you don't need to set any special options you can use the dependency array as your third parameter:

useHotkeys('ctrl+k', () => console.log(counter + 1), [counter])

isHotkeyPressed(keys: string | string[], splitKey?: string = ',')

This function allows us to check if the user is currently pressing down a key.

import { isHotkeyPressed } from 'react-hotkeys-hook'

isHotkeyPressed('esc') // Returns true if Escape key is pressed down.

You can also check for multiple keys at the same time:

isHotkeyPressed(['esc', 'ctrl+s']) // Returns true if Escape or Ctrl+S are pressed down.

Support

• Ask your question in the Github Discussions
• Ask your question on StackOverflow

Found an issue or have a feature request?

Open up an issue or pull request and participate.

Local Development

Checkout this repo, run yarn or npm i and then run the test script to test the behavior of the hook.

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

Distributed under the MIT License. See LICENSE for more information.

Contact

Johannes Klauss - @JohannesKlauss - [e-mail]

Project Link: https://github.com/JohannesKlauss/react-hotkeys-hook

Contributors

• bernatmv
• wheeler
• louisrli
• jameschao
• hmafzal
• godspeedelbow
• JoshuaKGoldberg
• ggascoigne