react-key-listener
v1.0.0react-key-listener
React component for handling keyboard events, without interfering with editable fields and buttons. Use this instead of calling addEventListener
or adding onKeyDown
to elements manually.
Usage
npm install --save react-key-listener
Example:
class MyComponent extends React.Component {
handleAKey = () => {
// do something
};
render() {
return (
<div tabIndex={0 /* allow this div to be given user focus */}>
<KeyListener keyDownHandlers={{
a: this.handleAKey
}} />
</div>
);
}
}
KeyListener ignores key events when the event originated from an <input>
, <textarea>
, or contenteditable
element. This prevents your key event handlers from triggering when the user expected to be typing in a text field.
The event listener is added to the KeyEvent
component's parent element.
Props
Name | Type | Description |
---|---|---|
keyDownHandlers |
{ [key: string]: (event: KeyboardEvent) => void } |
event handlers for keydown events. if event.key appears as a property on this object, the corresponding handler will be called |
keyPressHandlers |
{ [key: string]: (event: KeyboardEvent) => void } |
|
keyUpHandlers |
{ [key: string]: (event: KeyboardEvent) => void } |
|
global |
true | false |
if true, listen to events on document ; if false, listen on the KeyListener's parent element |
npm i react-key-listener
Metadata
- Apache-2.0
- Whatever
- Unknown
- released 5/6/2020