React component to listen to keydown and keyup keyboard events, defining and dispatching keyboard shortcuts. Uses a fork of hotkeys.js for keydown detection of special characters. You give it a keymap of shortcuts & it bind it to the mousetrap singleton. The, it'll unbind it when the component unmounts.
npm i -S react-hot-keysPreview demo.
import React from 'react';
import Hotkeys from 'react-hot-keys';
export default class HotkeysDemo extends React.Component {
constructor(props) {
super(props);
this.state = {
output: 'Hello, I am a component that listens to keydown and keyup of a',
}
}
onKeyUp(keyName, e, handle) {
console.log("test:onKeyUp", e, handle)
this.setState({
output: `onKeyUp ${keyName}`,
});
}
onKeyDown(keyName, e, handle) {
console.log("test:onKeyDown", keyName, e, handle)
this.setState({
output: `onKeyDown ${keyName}`,
});
}
render() {
return (
<Hotkeys
keyName="shift+a,alt+s"
onKeyDown={this.onKeyDown.bind(this)}
onKeyUp={this.onKeyUp.bind(this)}
>
<div style={{ padding: "50px" }}>
{this.state.output}
</div>
</Hotkeys>
)
}
}import React, { useState } from 'react';
import Hotkeys from 'react-hot-keys';
export default function HotkeysDemo() {
const [output, setOutput] = useState('Hello, I am a functional component that listens to keydown and keyup');
const onKeyUp = (keyName, e, handle) => {
console.log("test:onKeyUp", e, handle);
setOutput(`onKeyUp ${keyName}`);
};
const onKeyDown = (keyName, e, handle) => {
console.log("test:onKeyDown", keyName, e, handle);
setOutput(`onKeyDown ${keyName}`);
};
return (
<Hotkeys
keyName="shift+a,alt+s"
onKeyDown={onKeyDown}
onKeyUp={onKeyUp}
>
<div style={{ padding: "50px" }}>
{output}
</div>
</Hotkeys>
);
}import React, { useState, useRef } from 'react';
import Hotkeys from 'react-hot-keys';
export default function HotkeysWithRef() {
const [output, setOutput] = useState('Press shift+a or alt+s to test');
const hotkeysRef = useRef(null);
const onKeyDown = (keyName, e, handle) => {
console.log("onKeyDown", keyName, e, handle);
console.log("Current isKeyDown state:", hotkeysRef.current?.isKeyDown);
setOutput(`Key pressed: ${keyName}`);
};
const onKeyUp = (keyName, e, handle) => {
console.log("onKeyUp", keyName, e, handle);
console.log("Current isKeyDown state:", hotkeysRef.current?.isKeyDown);
setOutput(`Key released: ${keyName}`);
};
return (
<Hotkeys
ref={hotkeysRef}
keyName="shift+a,alt+s"
onKeyDown={onKeyDown}
onKeyUp={onKeyUp}
allowRepeat={true}
>
<div style={{ padding: "50px", border: "1px solid #ccc" }}>
<p>{output}</p>
<p>Try pressing and holding shift+a or alt+s</p>
</div>
</Hotkeys>
);
}Supported keys ⇧, shift, option, ⌥, alt, ctrl, control, command, ⌘ .
⌘ Command()
⌃ Control
⌥ Option(alt)
⇧ Shift
⇪ Caps Lock
fn Function key is fn (not supported)
↩︎ return/enter
space space keys
Callback function to be called when user pressed the target buttons
space space keys
Callback function to be called when user key uped the target buttons
allowRepeat?: boolean;
allowRepeat to allow auto repeating key down
disabled?: boolean;
Disable onKeyDown and onKeyUp events. Default: undefined
INPUT SELECT TEXTAREA default does not handle. filter to return to the true shortcut keys set to play a role, flase shortcut keys set up failure.
<Hotkeys
keyName="shift+a,alt+s"
+ filter={(event) => {
+ return true;
+ }}
/>As always, thanks to our amazing contributors!
Made with action-contributors.
Licensed under the MIT License.