feat: 🎸 add useKeyPress hook

docs/useKeyPress.md

@@ -0,0 +1,38 @@
+# `useKeyPress`
+
+React UI sensor hook that detects when the user is pressing a specific
+key on their keyboard.
+
+## Usage
+
+```jsx
+import { useKeyPress } from "react-use";
+
+const Demo = () => {
+  const hasPressedQ = useKeyPress("q");
+  const hasPressedW = useKeyPress("w");
+  const hasPressedE = useKeyPress("e");
+  const hasPressedR = useKeyPress("r");
+  const hasPressedT = useKeyPress("t");
+  const hasPressedY = useKeyPress("y");
+  return (
+    <div>
+      Try pressing one of these: <code>Q W E R T Y</code>
+      <div>
+        {hasPressedQ && "Q"}
+        {hasPressedW && "W"}
+        {hasPressedE && "E"}
+        {hasPressedR && "R"}
+        {hasPressedT && "T"}
+        {hasPressedY && "Y"}
+      </div>
+    </div>
+  );
+};
+```
+
+## Reference
+
+```js
+const hasPressed = useKeyPress('key');
+```

src/__stories__/useKeyPress.story.tsx

@@ -0,0 +1,30 @@
+import { storiesOf } from "@storybook/react";
+import * as React from "react";
+import { useKeyPress } from "..";
+import ShowDocs from "../util/ShowDocs";
+
+const Demo = () => {
+  const hasPressedQ = useKeyPress("q");
+  const hasPressedW = useKeyPress("w");
+  const hasPressedE = useKeyPress("e");
+  const hasPressedR = useKeyPress("r");
+  const hasPressedT = useKeyPress("t");
+  const hasPressedY = useKeyPress("y");
+  return (
+    <div>
+      Try pressing one of these: <code>Q W E R T Y</code>
+      <div>
+        {hasPressedQ && "Q"}
+        {hasPressedW && "W"}
+        {hasPressedE && "E"}
+        {hasPressedR && "R"}
+        {hasPressedT && "T"}
+        {hasPressedY && "Y"}
+      </div>
+    </div>
+  );
+};
+
+storiesOf("Sensors/useKeyPress", module)
+  .add("Docs", () => <ShowDocs md={require("../../docs/useKeyPress.md")} />)
+  .add("Demo", () => <Demo />);

src/index.ts

@@ -14,6 +14,7 @@ import useGetSetState from './useGetSetState';
 import useHover from './useHover';
 import useHoverDirty from './useHoverDirty';
 import useIdle from './useIdle';
+import useKeyPress from './useKeyPress';
 import useLifecycles from './useLifecycles';
 import useList from './useList';
 import useLocalStorage from './useLocalStorage';
@@ -63,6 +64,7 @@ export {
   useHover,
   useHoverDirty,
   useIdle,
+  useKeyPress,
   useLifecycles,
   useList,
   useLocalStorage,

src/useKeyPress.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+
+const {useState, useEffect} = React;
+
+// kudos: https://usehooks.com
+const useKeyPress = (targetKey: string) => {
+  const [state, setState] = useState(false);
+
+  const downHandler = ({key}: KeyboardEvent) => {
+    if (key === targetKey) {
+      setState(true);
+    }
+  }
+  const upHandler = ({key}: KeyboardEvent) => {
+    if (key === targetKey) {
+      setState(false);
+    }
+  };
+
+  useEffect(() => {
+    window.addEventListener('keydown', downHandler);
+    window.addEventListener('keyup', upHandler);
+    return () => {
+      window.removeEventListener('keydown', downHandler);
+      window.removeEventListener('keyup', upHandler);
+    };
+  }, []);
+
+  return state;
+}
+
+export default useKeyPress;

yarn.lock

@@ -7826,7 +7826,7 @@ react-docgen@^3.0.0-beta11:
     node-dir "^0.1.10"
     recast "^0.15.0"
 
-react-dom@next:
+react-dom@16.7.0-alpha.2:
   version "16.7.0-alpha.2"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.7.0-alpha.2.tgz#16632880ed43676315991d8b412cce6975a30282"
   integrity sha512-o0mMw8jBlwHjGZEy/vvKd/6giAX0+skREMOTs3/QHmgi+yAhUClp4My4Z9lsKy3SXV+03uPdm1l/QM7NTcGuMw==
@@ -7961,7 +7961,7 @@ react-wait@^0.3.0:
   resolved "https://registry.yarnpkg.com/react-wait/-/react-wait-0.3.0.tgz#0cdd4d919012451a5bc3ab0a16d00c6fd9a8c10b"
   integrity sha512-kB5x/kMKWcn0uVr9gBdNz21/oGbQwEQnF3P9p6E9yLfJ9DRcKS0fagbgYMFI0YFOoyKDj+2q6Rwax0kTYJF37g==
 
-react@next:
+react@16.7.0-alpha.2:
   version "16.7.0-alpha.2"
   resolved "https://registry.yarnpkg.com/react/-/react-16.7.0-alpha.2.tgz#924f2ae843a46ea82d104a8def7a599fbf2c78ce"
   integrity sha512-Xh1CC8KkqIojhC+LFXd21jxlVtzoVYdGnQAi/I2+dxbmos9ghbx5TQf9/nDxc4WxaFfUQJkya0w1k6rMeyIaxQ==