useKeyPress.tsx 632 B

123456789101112131415161718192021222324
  1. import React from "react";
  2. const useKeyPress = (targetKey) => {
  3. const [keyPressed, setKeyPressed] = React.useState(false);
  4. function downHandler({ key }) {
  5. if (key === targetKey) setKeyPressed(true);
  6. }
  7. const upHandler = ({ key }) => {
  8. if (key === targetKey) setKeyPressed(false);
  9. };
  10. React.useEffect(() => {
  11. window.addEventListener("keydown", downHandler);
  12. window.addEventListener("keyup", upHandler);
  13. return () => {
  14. window.removeEventListener("keydown", downHandler);
  15. window.removeEventListener("keyup", upHandler);
  16. };
  17. }, []);
  18. return keyPressed;
  19. };
  20. export default useKeyPress;