feat: 🎸 useKeyPress hook now uses useKey, KeyboardJS removed

BREAKING CHANGE: 🧨 KeyboardJS now available anymore in useKeyPress hook, instead it will be
a separate useKeyPressKJ hook.

src/__stories__/useKeyPress.story.tsx

@@ -1,35 +1,23 @@
-import { storiesOf } from "@storybook/react";
-import * as React from "react";
-import { useKeyPress } from "..";
-import ShowDocs from "../util/ShowDocs";
+import {storiesOf} from '@storybook/react';
+import * as React from 'react';
+import {useKeyPress} from '..';
+import ShowDocs from '../util/ShowDocs';
+import {CenterStory} from './util/CenterStory';
+
+const keys = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'];
 
 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");
-  const hasPressedWord = useKeyPress("q + w + e + r + t + y", {
-    useKeyboardJS: true
-  });
+  const states = [];
+  for (const key of keys) states.push(useKeyPress(key));
 
   return (
-    <div>
-      Try pressing each one of these at a time: <code>Q W E R T Y</code>
-      {!hasPressedWord && (
-        <div>
-          {hasPressedQ && "Q"}
-          {hasPressedW && "W"}
-          {hasPressedE && "E"}
-          {hasPressedR && "R"}
-          {hasPressedT && "T"}
-          {hasPressedY && "Y"}
-        </div>
-      )}
-      <div>And now press them all at once!</div>
-      <div>{hasPressedWord && "Q + W + E + R + T + Y"}</div>
-    </div>
+    <CenterStory>
+      <div style={{textAlign: 'center'}}>
+        Try pressing numbers
+        <br />
+        {states.reduce((s, pressed, index) => s + (pressed ? (s ? ' + ' : '') + keys[index] : ''), '')}
+      </div>
+    </CenterStory>
   );
 };
 

src/useEvent.ts

@@ -18,9 +18,11 @@ const useEvent = (name: string, handler?: null | undefined | ((event?: any) => v
   useEffect(() => {
     if (!handler) return;
     if (!target) return;
-    ((target as ListenerType1).addEventListener || (target as ListenerType2).on).call(target, name, handler, options);
+    const fn = ((target as ListenerType1).addEventListener || (target as ListenerType2).on);
+    fn.call(target, name, handler, options);
     return () => {
-      ((target as ListenerType1).removeEventListener || (target as ListenerType2).off).call(target, name, handler, options);
+      const fn = ((target as ListenerType1).removeEventListener || (target as ListenerType2).off);
+      fn.call(target, name, handler, options);
     };
   }, [name, handler, target, JSON.stringify(options)]);
 };

src/useKeyPress.ts

@@ -1,64 +1,11 @@
-import * as React from "react";
-const { useState, useEffect } = React;
-
-interface Options {
-  useKeyboardJS: boolean;
-}
-
-const defaults: Options = {
-  useKeyboardJS: false
-};
-
-const useKeyPress = (targetKey: string, config: Options = defaults) => {
-  const [state, setState] = useState(false);
-  const [keyboardjs, setKeyboardJs] = useState<any>(null);
-  const {useKeyboardJS} = config;
-
-  if (useKeyboardJS) {
-    import("keyboardjs").then(setKeyboardJs);
-  }
-
-  const regularDownHandler = ({ key }: KeyboardEvent) => {
-    if (key === targetKey) {
-      setState(true);
-    }
-  };
-
-  const regularUpHandler = ({ key }: KeyboardEvent) => {
-    if (key === targetKey) {
-      setState(false);
-    }
-  };
-
-  const customDownHandler = () => {
-    setState(true);
-  };
-  const customUpHandler = () => {
-    setState(false);
-  };
-
-  useEffect(() => {
-    if (useKeyboardJS) {
-      if (keyboardjs) {
-        keyboardjs.bind(targetKey, customDownHandler, customUpHandler);
-      }
-    } else {
-      window.addEventListener("keydown", regularDownHandler);
-      window.addEventListener("keyup", regularUpHandler);
-    }
-    return () => {
-      if (useKeyboardJS) {
-        if (keyboardjs) {
-          keyboardjs.unbind(targetKey, customDownHandler, customUpHandler);
-        }
-      } else {
-        window.removeEventListener("keydown", regularDownHandler);
-        window.removeEventListener("keyup", regularUpHandler);
-      }
-    };
-  }, [targetKey, useKeyPress, keyboardjs]);
-
-  return state;
+import {useState} from 'react';
+import useKey, {KeyFilter} from './useKey';
+
+const useKeyPress = (keyFilter: KeyFilter) => {
+  const [isDown, set] = useState(false);
+  useKey(keyFilter, () => set(true), {event: 'keydown'}, [isDown]);
+  useKey(keyFilter, () => set(false), {event: 'keyup'}, [isDown]);
+  return isDown;
 };
 
 export default useKeyPress;