# Introduction

react-keyboard is wrap of mousetrap.js in React, it offers keyboard shortcuts handling in React application.

![react-keyboard](https://user-images.githubusercontent.com/486382/52902608-e9d3fa00-321b-11e9-8138-35ff1dcf6c3c.gif)

## Getting started

### Install

```bash
npm install react-keyboard
```

### Usage Example <a href="#usage-example" id="usage-example"></a>

#### Defined keyMap

```typescript
const keyMap = {
  cmdK: {
    combo: 'command+k',
    eventType: 'keyup',
  },
  deleteNode: ['del', 'backspace'],
  left: 'left',
}
```

A KeyMap is an object which value is the key sequence. The key sequence can be:

1. `string` which can be a single key  `left` or combination of keys `command+k`
2. `array` which is an array of multiple key commands: `['del', 'backspace']`
3. `object` only use an object if you need to listen to specific event type: `{combo: 'command+k', eventType: 'keyup'}`

#### Use HotKeys Component

```typescript
import { HotKeys, Handlers } from 'react-keyboard'

export class MyHotKeys extends React.Component {

  showDocumentation = () => {
    console.log('show doc')
  }
  deleteNode = () => {
    console.log('deleted')
  }
  moveLeft = () => {
    console.log('move left')
  }
  showChildDocumentation = () => {
    console.log('show child doc')
  }

  handlersParent = {
    cmdK: this.showDocumentation,
    deleteNode: this.deleteNode,
  }

  handlersChild = {
    cmdK: this.showChildDocumentation,
    left: this.moveLeft,
  }

  render() {
    return <HotKeys keyMap={keyMap} handlers={this.handlersParent}>
      <span>this is my hotkeys</span>
      <HotKeys handlers={this.handlersChild}>A child</HotKeys>
    </HotKeys>
  }
}
```

Note: Child HotKeys components can inherit `keyMap` from their parents. You don't necessarily define `keyMap` for each child if parents already have the shortcuts you need.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://bigruan.gitbook.io/react-keyboard/readme.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.