ayrton / react-key-handler Goto Github PK

Currently this library does not ship with an interface file, we should add one. :)

While keyCode together with keepress returns 0 in Firefox (https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode). This can be mitigated to using a fallback thgrough the event.which argument:

if (!isNullOrUndefined(keyCode)) {
  // Firefox handles keyCode through which 
  const code = event.keyCode || event.which;
  return keyCode === code;
}

Although the change should probably be towards just `.code`: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code

There's no point in maintaining our own list of key code names, it's incomplete anyway. We should try and find a simple npm package that does this for us.

The following project looks promising: https://github.com/andrepolischuk/keycodes

If you're interesting in working on this, let me know :)

keyCode isn't a web standard anymore.
Maybe, should it be avoided?
https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode

Hello, Ayrton!

As you most likely know, React was updated to 15.5 and React.PropTypes and React.createClass were extracted into their own packages. So now React shows warning in case you use PropTypes in the old way.
Here you can find details.

I made a small pull request #103 to fix this. It would be great if you could find a time to check and merge it and release a new version with React 15.5 support.

keyValue's are KeyboardEvent.key values and keyCode's are KeyboardEvent.keyCode values.
This happens for Component's prop types table also.

Since Draft-js doesn't use default input or textareas, typing in its editor causes key handlers here to be triggered. Not quite sure whose "fault" it is, but just wanted to bring this to attention.

I have a component that contains this:

<KeyHandler
     keyEventName={KEYPRESS}
     keyValue='Enter'
     onKeyHandle={onKeyHandler}
/>

So, when i make multiple instances of my React component that contains this, I'm finding that onKeyHandler fires for ALL when ONE of them receives a keypress event. Any idea why this is happening or how to prevent it?

I've found that if the parent components props/state changes when an event is fired it will re-trigger the same event, i.e. firing twice. To be more specific, it happened when a new react-key-handler component with the same key binding was created on a different element. To illustrate the components

[button one, key 1], [button two, key 2], [button three, key 3]

when I pressed 2 the button one would disappear and the keys would with new bindings:

[button two, key 1], [button three, key 2]

I've solved this by adding a setTimeout(.., 0) to the call. This could possibly be activated through a prop that wraps the onKeyHandle in a setTimeout function.

I would like to use arrow keys for moving elements. This works great. But when I press 'up' and 'down' keys the browser scroll is also activated.

How can I prevent this default behavior? I'm working with React components:

<KeyHandler keyEventName={KEYPRESS} keyValue="ArrowLeft" onKeyHandle={this.moveEventLeft} />

The function doesn't seem to have an event parameter.

Thanks !

组件状态更新，键盘事件无效！
Component status update, keyboard event invalid!

Any interest/intentions towards a typescript implementation?

<KeyHandler keyValue="i" onKeyHandle={this.someMethod} />

someMethod(event) {
console.log(event.altKey);
}

someMethod is not getting invoked when pressing alt + i where as alt works fine with special keys like Arrows, function keys etc.

<KeyHandler keyEventName={KEYPRESS} keyCode={27} onKeyHandle={() => this.dismissOverlay()} />

That's what I have and it doesn't work. If I put 13 it'll work fine with Enter.

As of right now a component that gets wrapped by keyHandler has to expect keyValue, etc being passed down. That causes the component to be coupled with keyHandler if all you want to do is fire a callback that is on the props object. A way around this would be to allow an onKeyHandle parameter be passed to keyHandler that could look like (ownProps, keyValue, keyEventName) => void or something akin to that.

Just want to open the discussion of any pros/cons of this approach

Here's an example:

import React, { Component } from 'react';
import { keyHandler, KEYPRESS } from 'react-key-handler';

const CloseButton = ({ closeHandler }) => <button onClick={closeHandler}>Close</button>;

const CloseOnEnterKeyOrButton = keyHandler(
  { keyEventName: KEYPRESS, keyValue: 'enter' },
  ownProps => {
    if (ownProps.closeHandler) ownProps.closeHandler();
  }
)(CloseButton);

class Parent extends Component {
  constructor(props) {
    super(props);
    this.state = { isOpened: true };
  }
  render() {
    if (this.state.isOpened) {
      return (
        <div>
          Some stuff
          <CloseOnEnterKeyOrButton closeHandler={this.setState.bind(this, { isOpened: false })} />
        </div>
      );
    }
    return null;
  }
}

This 2nd parameter to keyHandler would only be fired when enter would be pressed

The 2 key combination works well. e.g. ctrl+A, ctrl+C
but when press key ctrl + shift + A
It only files event: event.ctrlKey ===true + event.keyCode === shiftLeft
But what I expect is: event.ctrlKey ===true + event.shiftKey=== true + event.keyCode ==='a'

is there anything wrong? or this react-key-handler cannot support 3 key combination?
<KeyHandler
keyEventName={KEYDOWN}
keyValue={['ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight', 'Control', 'Meta', 'Delete',
'Backspace', 'a', 'c', 'e', 'p', 's', 'v', 'x']}
onKeyHandle={this.keyDownEventHandler}
/>

According to the readme, HoC is recommended over component use. But I'm wondering why that is?

Sorry for the harsh/clumsy title, but why this API?

I mean, If I understand correctly, in the API, here

export default keyHandler({ keyEventName: KEYPRESS, keyValue: 's' })(Demo);

It seems that the component explicitly waits for a specific KEYPRESS to be s in order for the component to have this.props.keyEventName and this.props.keyValue not null (but 115 and s).

Why that choice?

I was more expecting a HOC/decorator that would give me in props any keyboard events with their value, my component having to deal with that specifically in componentWillReceiveProps() or componentWillUpdate(), but this current API seems very limiting.

Unless I'm missing the big picture here :)

Thanks for your lights

We need to add support to listen to more than one key code, e.g.:

const A = 65;
const B = 66;

keyHandler({ keyCodes: [A, B] })(MyComponent);

could probably decorate a property keyCodes to MyComponent:

{
  alt: true,
  ctrl: false,
  meta: false,
  shift: false,
  65: true,
  66: false,
}

Alternatively, the following projects looks promising:

• https://github.com/andrepolischuk/keycodes
• https://github.com/andrepolischuk/keycomb
• https://github.com/andrepolischuk/ks

If you're interesting in working on this, let me know :)

It works well for letter keys but won't work for special keys such as arrow keys. I also tried keyCode prop but no help.

<KeyHandler keyEventName={KEYPRESS} keyValue="a" onKeyHandle={() => console.log('a')} />
<KeyHandler keyEventName={KEYPRESS} keyValue="ArrowLeft" onKeyHandle={() => console.log('ArrowLeft')} />

The road to 0.2.0:

• #17
• Add prop types
• Deprecate keyName
• Throw invariant
• Loosen react dependency for future react versions