React-hotkeys

[![Travis][build-badge]][build] [![npm package][npm-badge]][npm] [![Coveralls][coveralls-badge]][coveralls]

[build-badge]: https://travis-ci.org/jaywcjlove/react-hotkeys.svg?branch=master «Build Badge» [build]: https://travis-ci.org/jaywcjlove/react-hotkeys «Build»

[npm-badge]: https://img.shields.io/npm/v/react-hot-keys.svg «Npm Badge» [npm]: https://www.npmjs.org/package/react-hot-keys «npm»

[coveralls-badge]: https://img.shields.io/coveralls/jaywcjlove/react-hotkeys/master.svg «Coveralls Badge» [coveralls]: https://coveralls.io/github/jaywcjlove/react-hotkeys «Coveralls»

React-компонент для прослушивания событий клавиатуры keydown и keyup, определения и отправки сочетаний клавиш. Использует форк hotkeys.js для обнаружения специальных символов при нажатии клавиши. Вы задаёте ему карту сочетаний клавиш, и он привязывает её к синглтону mousetrap. Затем он отвязывает её, когда компонент размонтируется.

Пример

Установка

sudo npm i -S react-hot-keys

Демо

Предварительный просмотр демо.

import React, { Component } from 'react';
import Hotkeys from 'react-hot-keys';

export default class HotkeysDemo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      output: 'Hello, I am a component that listens to keydown and keyup of a',
    }
  }
  onKeyUp(keyName, e, handle) {
    console.log("test:onKeyUp", e, handle)
    this.setState({
      output: `onKeyUp ${keyName}`,
    });
  }
  onKeyDown(keyName, e, handle) {
    console.log("test:onKeyDown", keyName, e, handle)
    this.setState({
      output: `onKeyDown ${keyName}`,
    });
  }
  render() {
    return (
      <Hotkeys 
        keyName="shift+a,alt+s" 
        onKeyDown={this.onKeyDown.bind(this)}
        onKeyUp={this.onKeyUp.bind(this)}
      >
        <div style={{ padding: "50px" }}>
          {this.state.output}
        </div>
      </Hotkeys>
    )
  }
}

API

keyName

Поддерживаемые клавиши: ⇧, shift, option, ⌥, alt, ctrl, control, command, ⌘.

⌘ Command()
⌃ Control
⌥ Option(alt)
⇧ Shift
⇪ Caps Lock
fn Function key is fn (не поддерживается)
↩︎ return/enter
space space keys

onKeyDown

Функция обратного вызова, которая вызывается, когда пользователь нажимает целевые кнопки. space пробельные клавиши

onKeyUp

Функция обратного вызова, которая вызывается, когда пользователь отпускает целевые клавиши.

Лицензия

MIT