Skip to content

Instantly share code, notes, and snippets.

@eriksachse

eriksachse/useKeyPress.jsx

Created November 9, 2021 09:31
Show Gist options
  • Save eriksachse/1acf2e6c8ec4c399a536dcb3af39e23c to your computer and use it in GitHub Desktop.
Save eriksachse/1acf2e6c8ec4c399a536dcb3af39e23c to your computer and use it in GitHub Desktop.
Download ZIP
Raw
useKeyPress.jsx
function useKeyPress(targetKey) {
// State for keeping track of whether key is pressed
const [keyPressed, setKeyPressed] = useState<boolean>(false);
// If pressed key is our target key then set to true
function downHandler({ key }) {
if (key === targetKey) {
setKeyPressed(true);
}
}
// If released key is our target key then set to false
const upHandler = ({ key }) => {
if (key === targetKey) {
setKeyPressed(false);
}
};
// Add event listeners
useEffect(() => {
window.addEventListener("keydown", downHandler);
window.addEventListener("keyup", upHandler);
// Remove event listeners on cleanup
return () => {
window.removeEventListener("keydown", downHandler);
window.removeEventListener("keyup", upHandler);
};
}, []); // Empty array ensures that effect is only run on mount and unmount
return keyPressed;
}
@eriksachse
Copy link
Author

Usage:

import { useState, useEffect } from "react";
// Usage
function App() {
  // Call our hook for each key that we'd like to monitor
  const happyPress = useKeyPress("h");
  const sadPress = useKeyPress("s");
  const robotPress = useKeyPress("r");
  const foxPress = useKeyPress("f");
  return (
    <div>
      <div>h, s, r, f</div>
      <div>
        {happyPress && "😊"}
        {sadPress && "😢"}
        {robotPress && "🤖"}
        {foxPress && "🦊"}
      </div>
    </div>
  );
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment