Menu

gitpiper

useKeyPress react Code Snippet in 2023

hooksstateeffecteventintermediate

Last Updated: 28 January 2023

Listens for changes in the pressed state of a given key.

  • Use the useState() hook to create a state variable that holds the pressed state of the given key.
  • Define two handler functions that update the state variable on key down or key up accordingly.
  • Use the useEffect() hook and EventTarget.addEventListener() to handle the 'keydown' and 'keyup' events.
  • Use EventTarget.removeEventListener() to perform cleanup after the component is unmounted.
const useKeyPress = targetKey => { const [keyPressed, setKeyPressed] = React.useState(false); const downHandler = ({ key }) => { if (key === targetKey) setKeyPressed(true); }; const upHandler = ({ key }) => { if (key === targetKey) setKeyPressed(false); }; React.useEffect(() => { window.addEventListener('keydown', downHandler); window.addEventListener('keyup', upHandler); return () => { window.removeEventListener('keydown', downHandler); window.removeEventListener('keyup', upHandler); }; }, []); return keyPressed; };
const MyApp = () => { const wPressed = useKeyPress('w'); return <p>The "w" key is {!wPressed ? 'not ' : ''}pressed!</p>; }; ReactDOM.render(<MyApp />, document.getElementById('root'));

react snippet similar to useKeyPress For You in January 2023

Subscribe to our Newsletter

Subscribe to get resources directly to your inbox. You won't receive any spam! ✌️

© 2023 GitPiper. All rights reserved

Rackpiper Technology Inc

Company

About UsBlogContact

Subscribe to our Newsletter

Subscribe to get resources directly to your inbox. You won't receive any spam! ✌️