linsight / react-keyboard-event-handler Goto Github PK

Hi, could you please update this to work with React 17? I get this error when trying to install in my React 17 project with Node 15 / npm 7:

npm ERR! Could not resolve dependency:
npm ERR! peer react@"15.x || 16.x" from [email protected]

Thanks!

Love the lib, currently I am heavily dependent on the function keys working with this library. In version 1.3.1. I had no issues whatsoever, it appears that keys outside of your alias are mapped to 'other' and should fall under the alias 'all' . However, as of 1.3.2 my keys are no longer being detected, stepping into the code, I can see alphanumeric and numeric are still registering, but no longer function keys F1 etc.. Please take a look when you can and let me know if something in my code needs to change to handle the update. Once again, thank you for a wonderful lib!

Love this library. I have a page that has long enough content to cause the scrollbar to appear on the browser. I have used your library to assign functionality to the up and down arrows. This functionality works but browser window still scrolls. is there any way to prevent the browser window from scrolling?

Hello,

I'm trying to catch the CTRL + + keys, I tried "ctrl++" but it don't work and create a Javascript error:

react-keyboard-event-handler.js:358 Uncaught TypeError: Cannot read property 'indexOf' of undefined
    at p (react-keyboard-event-handler.js:358)
    at react-keyboard-event-handler.js:261
    at Array.find (<anonymous>)
    at t.findMatchedKey (react-keyboard-event-handler.js:260)
    at t.value (react-keyboard-event-handler.js:183)

Is there a way to block browser capturing the keys, like ctrl+o or ctrl+s?
Try example in chrome and use ctrl+o.

Thanks.

I get the following error when compiling via babel (es2015, react):

ERROR in ./node_modules/react-keyboard-event-handler/src/KeyboardEventHandler.js 102:23
Module parse failed: Unexpected token (102:23)
You may need an appropriate loader to handle this file type.
|   render() {
|     const { children } = this.props;
>     return children ? (<span ref={ e => {
|         this.childrenContainer = e;
|       }}>{children}</span>) : null;

I am attempting to use the KeyboardEventHandler to modify the valueSelected prop of my component, but when I pass in the variable I'm using to set this prop, it mutates the variable into a function.

Here are the relevant lines of code:

valueSelected={selectedServerType}

<KeyboardEventHandler
handleKeys={['left', 'right']}
onKeyEvent={
(selectedServerType = key =>
this.handleKeyPress(key, selectedServerType))
}
/>

When selectedServerType first gets passed into handleKeyPress, and I console.log the value, it returns 'function selectedServerType()'

How can I pass the variable into handleKeyPress without it being mutated into a function?

Hello, am trying to get "up" to fire on an input control, however up is being handled by the browser and instead jumping the cursor to the front of the text... how might I override?

After upgrading to React 16.9.0 I get the following two warnings:

Warning: componentWillMount has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks for details.

and

Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks for details.

The warning suggests to rename these methods to *_UNSAFE, but this is a workaround and I can imagine you might want a better solution?

How to capture upper case and apostrophe ' char ?

import KeyboardEventHandler from 'react-keyboard-event-handler';

Causes an error

error: bundling failed: ReferenceError: Unknown plugin "add-module-exports" specified in "/Users/amaljose/ReactProjects/Hello360/node_modules/react-keyboard-event-handler/.babelrc" at 0, attempted to resolve relative to "/Users/amaljose/ReactProjects/Hello360/node_modules/react-keyboard-event-handler"
    at /Users/amaljose/ReactProjects/Hello360/node_modules/babel-core/lib/transformation/file/options/option-manager.js:180:17
    at Array.map (<anonymous>)
    at Function.normalisePlugins (/Users/amaljose/ReactProjects/Hello360/node_modules/babel-core/lib/transformation/file/options/option-manager.js:158:20)
    at OptionManager.mergeOptions (/Users/amaljose/ReactProjects/Hello360/node_modules/babel-core/lib/transformation/file/options/option-manager.js:234:36)
    at OptionManager.init (/Users/amaljose/ReactProjects/Hello360/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
    at File.initOptions (/Users/amaljose/ReactProjects/Hello360/node_modules/babel-core/lib/transformation/file/index.js:212:65)
    at new File (/Users/amaljose/ReactProjects/Hello360/node_modules/babel-core/lib/transformation/file/index.js:135:24)
    at Pipeline.transform (/Users/amaljose/ReactProjects/Hello360/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
    at Object.transform (/Users/amaljose/ReactProjects/Hello360/node_modules/metro-bundler/src/transformer.js:133:11)

For whatever reason react-keyboard-event-handler doesn't appear to work with https://material-ui.com/api/dialog/
It works outside of it but in a Dialog, nothing.

For anyone googling about the subject, on hindsight realised I was being dumb spending time debugging when all I needed was

  useEffect(() => {
    const handleKey = (e) => {
      if (e.key >= 1 && e.key < 10) setStars(Number(e.key))
    }
    window.addEventListener('keydown', handleKey)
    return () => window.removeEventListener('keydown', handleKey)
  },[])

(of course unmount the component to unregister listener instead of just hiding it)

Can anyone help me with capture special keys like @ and _ ?

Wonderful lib! How about add typescript support?

Cross-posted with issue #5 (closed)

I'm trying to test a keyboard event. Here is the text of my test:

it('triggers change in environment with arrow keys', () => {
wrapper.find('t').simulate('keydown', { keyCode: 39 });
expect(defaultProps.setServerTypeHandler).toHaveBeenCalledWith('dedicated');
});

In this case, the function that contains the call to setServerTypeHandler, which is the function that gets called on the keyboard event, is not getting called in the test - I have checked this in the test coverage, and neither the onKeyEvent nor the function, handleKeyPress, are covered. Is there a reason for this?

made the following function to detect pressing of escape button when in fullscreen mode.

import KeyboardEventHandler from "react-keyboard-event-handler";
import React from "react";
const handleKeyboard = (key, e) => {
e.preventDefault();
if (key === "esc") {
console.log("esc");
}
};
const ComponentA = (props) => (

export default ComponentA;

We're migrating over from Mousetrap and have a key binding against ?.

It doesn't seem possible to use ? in KeyboardEventHandler's handleKeys- we have to use shift+/ instead. Is this intended behaviour?

Thanks for the super-handy component!

It took me a while to figure out how to test keyboard events when using jsdom. Maybe you'd want to add a section on testing to the README?

FYI see jsdom/jsdom#1634 (comment).