https://github.com/ruanyl/react-keyboard

Handle keyboard event in React
https://github.com/ruanyl/react-keyboard

Last synced: 2 months ago
JSON representation

Handle keyboard event in React

• Host: GitHub
• URL: https://github.com/ruanyl/react-keyboard
• Owner: ruanyl
• License: mit
• Created: 2017-01-20T10:53:41.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2022-12-07T14:57:17.000Z (about 2 years ago)
• Last Synced: 2024-04-14T15:30:36.655Z (9 months ago)
• Language: TypeScript
• Homepage: https://bigruan.gitbook.io/react-keyboard/
• Size: 1.14 MB
• Stars: 16
• Watchers: 3
• Forks: 5
• Open Issues: 17
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# 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 

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

      this is my hotkeys

      A child

    

  }

}

```

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.