search

glortho / react-keydown

Lightweight keydown wrapper for React components
http://glortho.github.io/react-keydown/example/index.html
MIT License
499 stars 36 forks source link

Better/more examples #8

Open glortho opened 9 years ago

jpdevries commented 8 years ago

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.

glortho commented 8 years ago

@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.

jpdevries commented 8 years ago

@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?

glortho commented 8 years ago

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

glortho commented 8 years ago

Or this one @jpdevries, which is also a nice approach: https://github.com/Chrisui/react-hotkeys

jpdevries commented 8 years ago

@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.

jpdevries commented 8 years ago

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.

jpdevries commented 8 years ago

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.