# react-shortcut-chooser

> A React component that lets the user choose keyboard shortcuts

Latest version **1.1.2** (published 2016-03-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-shortcut-chooser
pnpm add react-shortcut-chooser
yarn add react-shortcut-chooser
bun add react-shortcut-chooser
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.2 |
| Published | 2016-03-26 |
| First published | 2016-03-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 46 |
| Author | Florian Hartmann |
| Maintainers | jscoder |
| Keywords | react, react-component, keyboard, shortcuts |

## Links

- npm: https://www.npmjs.com/package/react-shortcut-chooser
- Repository: https://github.com/florian/react-shortcut-chooser
- Homepage: https://github.com/florian/react-shortcut-chooser#readme
- Issues: https://github.com/florian/react-shortcut-chooser/issues
- npm.io page: https://npm.io/package/react-shortcut-chooser

## Dependencies (1)

- [key-event-to-string](https://npm.io/package/key-event-to-string.md) ^1.1.1

## 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

- 1.1.2 (latest) — 2016-03-26
- 1.1.1 — 2016-03-25
- 1.1.0 — 2016-03-25
- 1.0.7 — 2016-03-25
- 1.0.6 — 2016-03-25
- 1.0.5 — 2016-03-25
- 1.0.4 — 2016-03-25
- 1.0.3 — 2016-03-25
- 1.0.2 — 2016-03-20
- 1.0.1 — 2016-03-20
- 1.0.0 — 2016-03-20

## README

# React Shortcut Chooser

This is a React component that lets the user choose a keyboard shortcut. Native Mac apps have nice input fields that, when focused, capture all keyboard events and display the chosen keyboard shortcut in a nice string format. There was no equivalent JavaScript UI component for that, so I developed this library.

It's based on the [key-event-to-string](https://github.com/florian/key-event-to-string/) library that converts an event object into a readable format.

[![js-standard-style](https://cdn.rawgit.com/feross/standard/master/badge.svg)](https://github.com/feross/standard)

## Demo

I've added a minimalistic demo on [RequireBin](http://requirebin.com/?gist=0a89b084af7a1e614202). It sometimes takes RequireBin a while to load the NPM modules though.

## Installation

```
$ npm install --save react-shortcut-chooser
```

## Usage

```js
var ShortcutChooser = require('react-shortcut-chooser')
ReactDOM.render(<ShortcutChooser onUpdate={callback} />, el)
```

`ShortcutChooser` accepts a bunch of options:

| key | value | default value |
|:--|:--|:--|
| `modifierNeeded` |  Are only shortcuts with modifiers valid? Modifiers are cmd, ctrl, alt and shift | `true` |
| `keyNeeded` |  Is a key, other than a modifier, needed? | `true` |
| `onUpdate` |  A callback that's called with the new value and the old value | None, it's required |
| `validate` | Can be used to validate a potential keyboard shortcut. Is only called if `modifierNeeded` and `keyNeeded` were satisfied | A function that always returns `true` |
| `onInvalid` |  Depending on `modifierNeeded` / `keyNeeded` / `validate` some keyboard shortcuts will be rejected. This callback will be called with the invalid keyboard shortcut if that happens. Could e.g. be used to display an error message | Empty function |
| `modifierChars` | Can be used to change the format according to the [key-event-to-string](https://github.com/florian/key-event-to-string#options) options. Could e.g. be used to get a Mac style | `{}`

All other properties will be passed straight to the underlying input element. This is especially useful for setting a default value and styling it:

```js
<ShortcutChooser onUpdate={callback} defaultValue="Ctrl + A" className="shortcutInput" />
```

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