# react-shortcuts-hook

> A zero-dependencies hook for capturing keyboard shortcuts in components.

Latest version **1.1.2** (published 2021-06-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-shortcuts-hook
pnpm add react-shortcuts-hook
yarn add react-shortcuts-hook
bun add react-shortcuts-hook
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.2 |
| Published | 2021-06-10 |
| First published | 2019-11-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=8 |
| Dependencies | 0 |
| Unpacked size | 12.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | macfire10 |
| Maintainers | macfire10 |

## Links

- npm: https://www.npmjs.com/package/react-shortcuts-hook
- Repository: https://github.com/macfire10/react-shortcuts-hook
- Homepage: https://github.com/macfire10/react-shortcuts-hook#readme
- Issues: https://github.com/macfire10/react-shortcuts-hook/issues
- npm.io page: https://npm.io/package/react-shortcuts-hook

## Recent versions

- 1.1.2 (latest) — 2021-06-10
- 1.1.0 — 2020-02-15
- 1.0.2 — 2019-11-17
- 1.0.1 — 2019-11-15

## README

# ⌨️ react-shortcuts-hook ⌨️
A *zero-dependencies*, *lightweight* hook for capturing keyboard shortcuts in components.
**5 times lighter** than [react-hotkeys-hook](https://github.com/JohannesKlauss/react-hotkeys-hook "react-hotkeys-hook"), **4 times** lighter than [use-hotkeys](https://github.com/sandiiarov/use-hotkeys "use-hotkeys").

![npm](https://img.shields.io/npm/v/react-shortcuts-hook?style=flat-square)
![npm bundle size](https://img.shields.io/bundlephobia/minzip/react-shortcuts-hook/1.1.0)

## Install

NPM

```bash
npm install --save react-shortcuts-hook
```

Or with Yarn:

```bash
yarn add react-shortcuts-hook
```

## Usage

```jsx
import React, { useState } from 'react'
import { useShortcuts } from 'react-shortcuts-hook'

const App = () => {
  const [count, setCounter] = useState(0)
  useShortcuts(['control', 'k'], () => setCounter(count + 1), [count])

  return (
    <div>
      {`You've pressed Control+K ${count} times.`}
    </div>
  )
}

export default App
```

## Live example
[![Edit basic-example](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/basic-example-g6fnu?fontsize=14&hidenavigation=1&theme=dark)

## Parameters

- `keys: string[]`: Here you can set a single key, or a combination of keys, that you want hook to listen to. Every entry of this array should be a string with a proper `KeyboardEvent.key` value. [Here](https://keycode.info/) you can find a nice cheatsheet.
- `callback: () => void`: This is a callback that fires when all of the keys specified in the first argument are pressed at the same time. Note that is gets memoized under the hood, so you don't have to do that by yourself.
- `deps: any[] = []`: This is the dependency array that gets appended to memoisation of your callback. If you depend on values that change over time, you should put them here.

## Thanks

- [react-hotkeys-hook](https://github.com/JohannesKlauss/react-hotkeys-hook "react-hotkeys-hook") for inspiring this library
- [create-react-hook](https://github.com/hermanya/create-react-hook) for a project template.
- [Size-Limit](https://github.com/hermanya/create-react-hook) for size сontrol.

## License

MIT © [Nikita Volkov](https://github.com/macfire10)

---

This hook was bootstrapped using [create-react-hook](https://github.com/hermanya/create-react-hook).

---
_Source: https://npm.io/package/react-shortcuts-hook · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._