chore: 🤖 various improvements for useKeyPrssEvent()

add link to README, expose in index.ts, improve docs/demo, add Storybook
story

README.md

@@ -37,6 +37,7 @@
   - [`useHover` and `useHoverDirty`](./docs/useHover.md) — tracks mouse hover state of some element. [![][img-demo]](https://codesandbox.io/s/zpn583rvx)
   - [`useIdle`](./docs/useIdle.md) — tracks whether user is being inactive.
   - [`useKeyPress`](./docs/useKeyPress.md) — tracks whether a keyboard key—or set of keys—was pressed.
+  - [`useKeyPressEvent`](./docs/useKeyPressEvent.md) — call `onKeyDown` and `onKeyUp` callbacks, whe key pressed.
   - [`useLocation`](./docs/useLocation.md) — tracks page navigation bar location state.
   - [`useMedia`](./docs/useMedia.md) — tracks state of a CSS media query.
   - [`useMediaDevices`](./docs/useMediaDevices.md) — tracks state of connected hardware devices.

docs/useKeyPressEvent.md

@@ -23,26 +23,20 @@ import { useKeyPressEvent } from "react-use";
 const Demo = () => {
   const [count, setCount] = useState(0);
 
-  const onKeyup = keys => {
-    console.log(`onKeyup: ${keys}`);
-  };
+  const increment = () => setCount(count => ++count);
+  const decrement = () => setCount(count => --count);
+  const reset = () => setCount(count => 0);
 
-  const onKeydown = keys => {
-    console.log(`onKeydown: ${keys}`);
-    setCount(count => ++count);
-  };
-
-  useKeyPressEvent('h', onKeyup, onKeydown);
-
-  useKeyPressEvent('l', () => {
-    console.log(`onKeydown for 'l'`);
-    setCount(count => ++count);
-  });
+  useKeyPressEvent(']', increment, increment);
+  useKeyPressEvent('[', decrement, decrement);
+  useKeyPressEvent('r', reset);
 
   return (
     <div>
-      <p>Try pressing <code>h</code> or <code>l</code> to see the count increment</p>
-      <p>Count: {countOfPressed}</p>
+      <p>
+        Try pressing <code>[</code>, <code>]</code>, and <code>r</code> to
+        see the count incremented and decremented.</p>
+      <p>Count: {count}</p>
     </div>
   );
 };
@@ -52,6 +46,5 @@ const Demo = () => {
 
 ```js
 useKeyPressEvent('<key>', onKeydown);
-
 useKeyPressEvent('<key>', onKeyup, onKeydown);
 ```

src/__stories__/useKeyPressEvent.story.tsx

@@ -0,0 +1,30 @@
+import { storiesOf } from "@storybook/react";
+import * as React from "react";
+import { useKeyPressEvent } from "..";
+import ShowDocs from "../util/ShowDocs";
+
+const Demo = () => {
+  const [count, setCount] = React.useState(0);
+
+  const increment = () => setCount(count => ++count);
+  const decrement = () => setCount(count => --count);
+  const reset = () => setCount(count => 0);
+
+  useKeyPressEvent(']', increment, increment);
+  useKeyPressEvent('[', decrement, decrement);
+  useKeyPressEvent('r', reset);
+
+  return (
+    <div>
+      <style dangerouslySetInnerHTML={{__html: `code {color: red}`}} />
+      <p>
+        Try pressing <code>[</code>, <code>]</code>, and <code>r</code> to
+        see the count incremented and decremented.</p>
+      <p>Count: {count}</p>
+    </div>
+  );
+};
+
+storiesOf("Sensors/useKeyPressEvent", module)
+  .add("Docs", () => <ShowDocs md={require("../../docs/useKeyPressEvent.md")} />)
+  .add("Demo", () => <Demo />);

src/index.ts

@@ -15,6 +15,7 @@ import useHover from './useHover';
 import useHoverDirty from './useHoverDirty';
 import useIdle from './useIdle';
 import useKeyPress from './useKeyPress';
+import useKeyPressEvent from './useKeyPressEvent';
 import useLifecycles from './useLifecycles';
 import useList from './useList';
 import useLocalStorage from './useLocalStorage';
@@ -65,6 +66,7 @@ export {
   useHoverDirty,
   useIdle,
   useKeyPress,
+  useKeyPressEvent,
   useLifecycles,
   useList,
   useLocalStorage,

yarn.lock

@@ -6719,7 +6719,6 @@ npm@6.5.0:
     cmd-shim "~2.0.2"
     columnify "~1.5.4"
     config-chain "^1.1.12"
-    debuglog "*"
     detect-indent "~5.0.0"
     detect-newline "^2.1.0"
     dezalgo "~1.0.3"
@@ -6734,7 +6733,6 @@ npm@6.5.0:
     has-unicode "~2.0.1"
     hosted-git-info "^2.7.1"
     iferr "^1.0.2"
-    imurmurhash "*"
     inflight "~1.0.6"
     inherits "~2.0.3"
     ini "^1.3.5"
@@ -6747,14 +6745,8 @@ npm@6.5.0:
     libnpx "^10.2.0"
     lock-verify "^2.0.2"
     lockfile "^1.0.4"
-    lodash._baseindexof "*"
     lodash._baseuniq "~4.6.0"
-    lodash._bindcallback "*"
-    lodash._cacheindexof "*"
-    lodash._createcache "*"
-    lodash._getnative "*"
     lodash.clonedeep "~4.5.0"
-    lodash.restparam "*"
     lodash.union "~4.6.0"
     lodash.uniq "~4.5.0"
     lodash.without "~4.4.0"
@@ -6793,7 +6785,6 @@ npm@6.5.0:
     read-package-json "^2.0.13"
     read-package-tree "^5.2.1"
     readable-stream "^2.3.6"
-    readdir-scoped-modules "*"
     request "^2.88.0"
     retry "^0.12.0"
     rimraf "~2.6.2"
@@ -9863,7 +9854,7 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
-typescript@3.3.3333:
+typescript@^3.3.3333:
   version "3.3.3333"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.3.3333.tgz#171b2c5af66c59e9431199117a3bcadc66fdcfd6"
   integrity sha512-JjSKsAfuHBE/fB2oZ8NxtRTk5iGcg6hkYXMnZ3Wc+b2RSqejEqTaem11mHASMnFilHrax3sLK0GDzcJrekZYLw==