Keyboard Events
A custom Hook for listening to keyboard events.
useKeyPress.js
import React, { useState } from "react";
const useKeyPress = function (targetKey) {
const [keyPressed, setKeyPressed] = useState(false);
function downHandler({ key }) {
if (key === targetKey) {
setKeyPressed(true);
}
}
const upHandler = ({ key }) => {
if (key === targetKey) {
setKeyPressed(false);
}
};
React.useEffect(() => {
document.addEventListener("keydown", downHandler);
document.addEventListener("keyup", upHandler);
return () => {
document.removeEventListener("keydown", downHandler);
document.removeEventListener("keyup", upHandler);
};
});
return keyPressed;
};
export default useKeyPress;
KeyPress.js
import useKeyPress from "@/hooks/useKeyPress";
// Rest of the code...
const enterPress = useKeyPress("Enter");
const ctrlPress = useKeyPress("Control");
useEffect(() => {
if (enterPress && ctrlPress) {
// Enter Key and Control Keys pressed together
domeSomething();
}
}, [ctrlPress, enterPress]);
// Rest of the code...