feat: 🎸 add useKey hook

src/__stories__/useKey.story.tsx

@@ -0,0 +1,31 @@
+import { storiesOf } from "@storybook/react";
+import * as React from "react";
+import {useKey} from "..";
+import ShowDocs from "../util/ShowDocs";
+import {CenterStory} from "./util/CenterStory";
+
+const Demo = () => {
+  const [count, setCount] = React.useState(0);
+
+  const increment = () => setCount(count => ++count);
+  const decrement = () => setCount(count => --count);
+  const reset = () => setCount(count => 0);
+
+  useKey(']', increment);
+  useKey('[', decrement);
+  useKey('r', reset);
+
+  return (
+    <CenterStory>
+      <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>
+    </CenterStory>
+  );
+};
+
+storiesOf("Sensors/useKey", module)
+  .add("Docs", () => <ShowDocs md={require("../../docs/useKeyPressEvent.md")} />)
+  .add("Demo", () => <Demo />);

src/index.ts

@@ -17,6 +17,7 @@ import useGetSetState from './useGetSetState';
 import useHover from './useHover';
 import useHoverDirty from './useHoverDirty';
 import useIdle from './useIdle';
+import useKey from './useKey';
 import useKeyPress from './useKeyPress';
 import useKeyPressEvent from './useKeyPressEvent';
 import useLifecycles from './useLifecycles';
@@ -82,6 +83,7 @@ export {
   useHover,
   useHoverDirty,
   useIdle,
+  useKey,
   useKeyPress,
   useKeyPressEvent,
   useLifecycles,

src/useEvent.ts

@@ -16,7 +16,6 @@ const defaultTarget = typeof window === 'object' ? window : null;
 
 const useEvent = (name: string, handler?: null | undefined | ((event?: any) => void), target: null | UseEventTarget = defaultTarget, options?: any) => {
   useEffect(() => {
-    console.log('adding event...');
     if (!handler) return;
     if (!target) return;
     ((target as ListenerType1).addEventListener || (target as ListenerType2).on).call(target, name, handler, options);

src/useKey.ts

@@ -0,0 +1,35 @@
+import {useMemo, DependencyList} from 'react';
+import useEvent, {UseEventTarget} from './useEvent';
+
+export type KeyPredicate = (event: KeyboardEvent) => boolean;
+export type KeyFilter = null | undefined | string | ((event: KeyboardEvent) => boolean);
+export type Handler = (event: KeyboardEvent) => void;
+export interface UseKeyOptions {
+  event?: 'keydown' | 'keypress' | 'keyup',
+  target?: UseEventTarget,
+  options?: any,
+}
+
+const noop = () => {};
+const createKeyPredicate = (keyFilter: KeyFilter): KeyPredicate =>
+  typeof keyFilter === 'function'
+    ? keyFilter
+    : typeof keyFilter === 'string'
+      ? (event: KeyboardEvent) => event.key === keyFilter
+      : keyFilter
+        ? () => true
+        : () => false;
+
+const useKey = (key: KeyFilter, fn: Handler = noop, opts: UseKeyOptions = {}, deps: DependencyList = [key]) => {
+  const {event = 'keydown', target, options} = opts;
+  const handler = useMemo(() => {
+    const predicate: KeyPredicate = createKeyPredicate(key);
+    const handler: Handler = (event) => {
+      if (predicate(event)) return fn(event);
+    };
+    return handler;
+  }, deps);
+  useEvent(event, handler, target, options);
+};
+
+export default useKey;