# @fluentui/keyboard-key

> A simple utility for determining the KeyboardEvent.key property from a keyboard event.

Latest version **0.4.23** (published 2024-06-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install @fluentui/keyboard-key
pnpm add @fluentui/keyboard-key
yarn add @fluentui/keyboard-key
bun add @fluentui/keyboard-key
```

## Health

**Score 50/100 (C)** — status: abandoned.

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

Warnings: low downloads; pre 1.0.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 0.4.23 |
| Published | 2024-06-24 |
| First published | 2020-03-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 140.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 20283 |

## Links

- npm: https://www.npmjs.com/package/@fluentui/keyboard-key
- Repository: https://github.com/microsoft/fluentui
- Homepage: https://github.com/microsoft/fluentui#readme
- Issues: https://github.com/microsoft/fluentui/issues
- npm.io page: https://npm.io/package/@fluentui/keyboard-key

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^2.1.0

## Recent versions

- 0.4.23 (latest) — 2024-06-24
- 0.4.22 — 2024-06-06
- 0.4.21 — 2024-05-28
- 0.4.20 — 2024-05-24
- 0.4.19 — 2024-05-23
- 0.4.18 — 2024-05-20
- 0.4.17 — 2024-04-24
- 0.4.16 — 2024-04-12
- 0.4.15 — 2024-04-03
- 0.4.14 — 2024-01-10
- 0.4.13 — 2023-12-14
- 0.4.12 — 2023-10-28
- 0.4.11 — 2023-05-31
- 0.4.10 — 2023-05-30
- 0.4.9 — 2023-05-05
- … 41 more at https://npm.io/package/@fluentui/keyboard-key/versions

## README

# @fluentui/keyboard-key

A simple utility for determining the `KeyboardEvent.key` property from a keyboard event.

<!-- toc -->

- [Install](#install)
- [Usage](#usage)
  - [getKey()](#getkey)
  - [getCode()](#getcode)
- [Why?](#why)
- [Locale Caveat](#locale-caveat)

<!-- tocstop -->

## Install

```
yarn add keyboard-key

# or

npm install keyboard-key
```

## Usage

### getKey()

Get the `key` property value from an event.

```js
document.addEventListener('keydown', event => {
  const key = keyboardKey.getKey(event);

  switch (key) {
    case 'Escape':
      // handle escape key
      break;
    default:
      break;
  }
});
```

> See [MDN][2] or the source for a full list of `key` values.

### getCode()

You can also get the normalized `keyCode` from an event. `@fluentui/keyboard-key` includes a hash of `key` names to `keyCode`s for easy comparisons:

```js
document.addEventListener('keydown', event => {
  const code = getCode(event);

  switch (code) {
    case keyboardKey.Escape: // 27
      // handle escape key
      break;
    default:
      break;
  }
});
```

## Why?

Most previous key identifying KeyboardEvent properties have been pressed have been deprecated in favor of `Keyboard.key`.

:-1: `KeyboardEvent.char`
:-1: `KeyboardEvent.charCode`
:-1: `KeyboardEvent.keyCode`
:-1: `KeyboardEvent.keyIdentifier`
:-1: `KeyboardEvent.keyLocation`
:-1: `KeyboardEvent.which`

:+1: `KeyboardEvent.key`

Unfortunately, `KeyboardEvent.key` does not yet have full [browser support][3]. Leaving the browsers without a reliable property for identifying keyboard event keys.

## Locale Caveat

This utility interprets use of the shift key when inferring event `key` values. Example, an event describing <kbd>shift</kbd>+<kbd>/</kbd> would result in a `key` value of <kbd>?</kbd>. This logic assumes an `en-US` locale keyboard layout. This will **not work** if you are using a different locale such as a German layout where <kbd>/</kbd> is <kbd>shift</kbd>+<kbd>7</kbd>.

[1]: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key
[2]: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values
[3]: http://caniuse.com/#feat=keyboardevent-key

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