react-keydown
react-keydown copied to clipboard
glortho
Better/more examples
I agree this would be great. I'd even be willing to contribute. I'm trying to use react-keydown but struggling to understand how. I have Babel. Do I need to be using webpack? I'm not sue how to include react-keydown in my Grunt based config.
@jpdevries I take it you're not using a module system? I highly recommend using es6/2015 modules or commonjs, or at the very least something like requirejs. If you're not using one of the first two you can clone and use the master-umd branch, but this is not very well tested and, in my biased opinion, caters to a less productive approach for modules + loading.
@glortho I suppose I'm not but I'm not opposed to. So far I'm just using grunt-babel and some simple React classes.
https://github.com/jpdevries/nightair/blob/master/_build/jsx/main.jsx
Everything is just in one file and I haven't split them up yet.
The example code is confusing to me with the @keydown and it seems like there should be dot notation where there isn't. Is that es2015 syntax or something else?
Ah I see @jpdevries . @keydown uses decorators, a proposed addition to JavaScript. You can read up about them here https://github.com/wycats/javascript-decorators/ though if you're not already using them, and not using es2015 class syntax, I'd recommend against this pattern. A solution like this one might fit your current code better: https://github.com/mapbox/react-keybinding
Or this one @jpdevries, which is also a nice approach: https://github.com/Chrisui/react-hotkeys
@glortho Ok thanks. That explains the confusion there. I'll check that other solution out. I'd like to get more familiar with this workflow eventually.
Cool I'll check that one out as well. I'm looking to add keyboard listeners to this alarm clock app http://jpdevries.github.io/nightair/ for things like spacebar + h/m to set the alarm. It will be used to teach students about React, JSX, and SVG so I need to make sure not to throw too much at them at once. Decorators look interesting though.
Got set up with browserify and tried out react-keybindings but it doesn't seem to support things like 'space + h' to detect when the space bar is held down and the h key is pressed. The modifiers are hard coded.