useKeyPress.tsx 662 B

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