![\"Bundlephobia\"](\"https://img.shields.io/bundlephobia/minzip/react-hotkeys-hook?style=for-the-badge&labelColor=24292e\")
\n \n \n ![\"Types\"](\"https://img.shields.io/npm/types/react-hotkeys-hook?style=for-the-badge&labelColor=24292e\")
\n \n \n ![\"NPM](\"https://img.shields.io/npm/v/react-hotkeys-hook?style=for-the-badge&labelColor=24292e\")
\n \n \n ![\"MIT](\"https://img.shields.io/npm/l/react-hotkeys-hook?style=for-the-badge&labelColor=24292e\")
\n \n\n \n
\n \n ![\"Sponsored](\"https://raw.githubusercontent.com/spaceteams/badges/main/sponsored-by-spaceteams.svg\")
\n \n
\nA React hook for using keyboard shortcuts in components in a declarative way.\n
\n\n\n Pressed {count} times.\n
\n )\n}\n```\n\n### Scopes\n\nScopes allow you to group hotkeys together. You can use scopes to prevent hotkeys from colliding with each other.\n\n```jsx harmony\nconst App = () => {\n return (\n\n Pressed {count} times.\n
\n )\n}\n```\n\n#### Changing a scope's active state\n\nYou can change the active state of a scope using the `disableScope`, `enableScope` and `toggleScope` functions\nreturned by the `useHotkeysContext()` hook. Note that you have to have your app wrapped in a `\n Pressed {count} times.\n
\n )\n}\n```\n\n## Documentation & Live Examples\n\n* [Quick Start](https://react-hotkeys-hook.vercel.app/docs/intro)\n* [Documentation](https://react-hotkeys-hook.vercel.app/docs/documentation/installation)\n* [API](https://react-hotkeys-hook.vercel.app/docs/api/use-hotkeys)\n\n## API\n\n### useHotkeys(keys, callback)\n\n```typescript\nuseHotkeys(keys: string | string[], callback: (event: KeyboardEvent, handler: HotkeysEvent) => void, options: Options = {}, deps: DependencyList = [])\n```\n\n| Parameter | Type | Required? | Default value | Description |\n|---------------|---------------------------------------------------------|-----------|---------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `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 comma. This split key value can be overridden with the `splitKey` option. |\n| `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`. |\n| `options` | `Options` | optional | `{}` | Object to modify the behavior of the hook. Default options are given below. |\n| `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). |\n\n### Options\n\nAll options are optional and have a default value which you can override to change the behavior of the hook.\n\n| Option | Type | Default value | Description |\n|--------------------------|--------------------------------------------------------------------------------------|---------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `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. |\n| `enableOnFormTags` | `boolean` or `FormTags[]` | `false` | By default, hotkeys are disabled when a form element is focused. This prevents accidental triggering while the user is typing. Set to `true` to enable on all form tags, or pass an array of specific tags (e.g. `['input', 'textarea', 'select']`) |\n| `enableOnContentEditable` | `boolean` | `false` | Enable hotkeys on elements with the `contentEditable` attribute set to `true` |\n| `splitKey` | `string` | `+` | Character that joins keys within a combination (e.g. `shift+a`). Change this if you need to listen for the `+` key itself |\n| `delimiter` | `string` | `,` | Character that separates different hotkey combinations mapped to the same callback (e.g. `ctrl+a, shift+b`) |\n| `scopes` | `string` or `string[]` | `*` | With scopes you can group hotkeys together. The default scope is the wildcard `*` which matches all hotkeys. Use the `