From ab1a1e09ea20126bafe6c2be7293e62a0d9be67b Mon Sep 17 00:00:00 2001
From: Chalarangelo <chalarangelo@gmail.com>
Date: Thu, 2 Sep 2021 09:24:26 +0300
Subject: [PATCH] Add useKeyPress

---
 snippets/useKeyPress.md | 48 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 48 insertions(+)
 create mode 100644 snippets/useKeyPress.md

diff --git a/snippets/useKeyPress.md b/snippets/useKeyPress.md
new file mode 100644
index 000000000..5fdcdd33a
--- /dev/null
+++ b/snippets/useKeyPress.md
@@ -0,0 +1,48 @@
+---
+title: useKeyPress
+tags: hooks,state,effect,intermediate
+firstSeen: 2021-09-07T05:00:00-04:00
+---
+
+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.
+
+```jsx
+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;
+};
+```
+
+```jsx
+const MyApp = () => {
+  const wPressed = useKeyPress('w');
+
+  return <p>The "w" key is {!wPressed ? 'not ' : ''}pressed!</p>;
+};
+
+ReactDOM.render(<MyApp />, document.getElementById('root'));
+```