useKeyPress.tsx 1.0 KB

123456789101112131415161718192021222324252627282930313233343536
  1. // hook from https://usehooks.com/useKeyPress/
  2. import {useEffect, useState} from 'react';
  3. function useKeyPress(targetKey: React.KeyboardEvent['key']) {
  4. // State for keeping track of whether key is pressed
  5. const [keyPressed, setKeyPressed] = useState(false);
  6. // If pressed key is the target key then set to true
  7. function downHandler({key}) {
  8. if (key === targetKey) {
  9. setKeyPressed(true);
  10. }
  11. }
  12. // If released key is the target key then set to false
  13. function upHandler({key}) {
  14. if (key === targetKey) {
  15. setKeyPressed(false);
  16. }
  17. }
  18. // Add event listeners
  19. useEffect(() => {
  20. window.addEventListener('keydown', downHandler);
  21. window.addEventListener('keyup', upHandler);
  22. // Remove event listeners on cleanup
  23. return () => {
  24. window.removeEventListener('keydown', downHandler);
  25. window.removeEventListener('keyup', upHandler);
  26. };
  27. }, []); // Empty array ensures that effect is only run on mount and unmount
  28. return keyPressed;
  29. }
  30. export default useKeyPress;