Easily handle key press events with React:
// App.js
import React from 'react';
import Press from 'react-press';
// Add it wherever you want to start listening
export default () => (
<Press space={e => alert('Space clicked!')}>
<div>...</div>
</Press>
));The keys are the same as in the MDN documentation. With react-press they are case-insensitive, so feel free to put them lowercase or uppercase. Besides those, we have some convenient names:
| prop | equivalent e.keyCode |
|---|---|
| space | ' ' (space) |
| up | ArrowUp |
| right | ArrowTight |
| down | ArrowTown |
| left | ArrowTeft |
export default () => (
<Press
left={(e) => alert("Left!")}
right={(e) => alert("Right!")}
a={(e) => alert("Key `a` was pressed")}
>
While this is showing there will be events attached :)
</Press>
);Help wanted: keyboard combinations wanted like <Press ctrl-s={...}>.