# @rooks/use-key

> Keyboard key handler hook for react

Latest version **4.11.2** (published 2021-05-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install @rooks/use-key
pnpm add @rooks/use-key
yarn add @rooks/use-key
bun add @rooks/use-key
```

## Health

**Score 40/100 (D)** — status: abandoned.

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

Warnings: low downloads.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 4.11.2 |
| Published | 2021-05-01 |
| First published | 2018-12-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 12.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3450 |
| Maintainers | imbhargav5 |
| Keywords | use, react-hooks.org, react, rooks, hooks, keyboard event, key |

## Links

- npm: https://www.npmjs.com/package/@rooks/use-key
- Repository: https://github.com/imbhargav5/rooks
- Homepage: https://react-hooks.org/docs/use-key
- Issues: https://github.com/imbhargav5/rooks/issues
- npm.io page: https://npm.io/package/@rooks/use-key

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 4.11.2 (latest) — 2021-05-01
- 4.9.0-canary.0 (canary) — 2021-02-10
- 3.4.4-71d48a96.0 (next) — 2019-12-14
- 3.4.2-0668aca8.0 (dev) — 2019-12-04
- 3.3.0-alpha.1 (alpha) — 2019-09-07
- 3.0.0-beta.4 (beta) — 2019-04-14
- 1.0.14-alpha.1 (remove-readme) — 2019-01-27
- 4.11.1 — 2021-05-01
- 4.11.0 — 2021-04-06
- 4.10.1 — 2021-03-31
- 4.10.0 — 2021-03-21
- 4.9.2 — 2021-02-21
- 4.9.1 — 2021-02-11
- 4.9.0 — 2021-02-10
- 4.8.1 — 2021-02-03
- … 105 more at https://npm.io/package/@rooks/use-key/versions

## README

# @rooks/use-key

## *Note: Future updates to this package have moved to the main package* [rooks](https://npmjs.com/package/rooks). All hooks now reside in a single package which you can install using

```
npm install rooks
```

or 

```
yarn add rooks
```

Rooks is completely treeshakeable and if you use only 1 of the 50+ hooks in the package, only that hook will be bundled with your code. Your bundle will only contain the hooks that you need. Cheers!

![TitleCard](https://raw.githubusercontent.com/imbhargav5/rooks/v4-compat/packages/key/title-card.svg)

![Build Status](https://github.com/imbhargav5/rooks/workflows/Node%20CI/badge.svg)![](https://img.shields.io/npm/v/@rooks/use-key/latest.svg) ![](https://img.shields.io/npm/l/@rooks/use-key.svg) ![](https://img.shields.io/npm/dt/@rooks/use-key.svg) ![](https://img.shields.io/david/imbhargav5/rooks.svg?path=packages%2Fkey)


## About 
keypress, keyup and keydown event handlers as hooks for react.

## Installation

```
npm install --save @rooks/use-key
```

## Importing the hook

```javascript
import useKey from "@rooks/use-key";
```

## Usage

#### Basic example with keydown

```jsx
function Demo() {
  const inputRef = useRef();
  function windowEnter(e) {
    console.log("[Demo 1] Enter key was pressed on window");
  }
  function vowelsEntered(e) {
    console.log("[Demo 1] You typed a vowel");
  }
  function capitalVowelsEntered(e) {
    console.log("[Demo 1] You typed a capital vowel");
  }
  // window is the target
  useKey(["Enter"], windowEnter);
  useKey(["a", "e", "i", "o", "u"], vowelsEntered, {
    target: inputRef
  });
  useKey(["A", "E", "I", "O", "U"], capitalVowelsEntered, {
    target: inputRef
  });
  return (
    <>
      <p>Press enter anywhere to trigger a console.log statement</p>
      <p>Press a,e,i,o,u in the input to trigger a console.log statement</p>
      <p>Press A,E,I,O,U in the input to trigger a different log statement</p>
      <input ref={inputRef} />
    </>
  );
}

render(<Demo />);
```

#### Multiple kinds of events

```jsx
function Demo() {
  const inputRef = useRef();
  function onKeyInteraction(e) {
    console.log("[Demo 2]Enter key", e.type);
  }

  useKey(["Enter"], onKeyInteraction, {
    target: inputRef,
    eventTypes: ["keypress", "keydown", "keyup"]
  });
  return (
    <>
      <p>Try "Enter" Keypress keydown and keyup </p>
      <p>
        It will log 3 events on this input. Since you can listen to multiple
        types of events on a keyboard key.
      </p>
      <input ref={inputRef} />
    </>
  );
}
render(<Demo />);
```

#### Conditionally setting handlers

```jsx
function Demo() {
  const inputRef = useRef();
  const [shouldListen, setShouldListen] = useState(false);
  function toggleShouldListen() {
    setShouldListen(!shouldListen);
  }
  function onKeyInteraction(e) {
    console.log("[Demo 3] Enter key", e.type);
  }

  useKey(["Enter"], onKeyInteraction, {
    target: inputRef,
    eventTypes: ["keypress", "keydown", "keyup"],
    when: shouldListen
  });
  return (
    <>
      <p>
        Enter key events will only be logged when the listening state is true.
        Click on the button to toggle between listening and not listening
        states.{" "}
      </p>
      <p>
        Handy for adding and removing event handlers only when certain
        conditions are met.
      </p>
      <input ref={inputRef} />
      <br />
      <button onClick={toggleShouldListen}>
        <b>{shouldListen ? "Listening" : "Not listening"}</b> - Toggle{" "}
      </button>
    </>
  );
}
render(<Demo />);
```

---
_Source: https://npm.io/package/@rooks/use-key · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._