From 3516aa69a9102dcd802e014a3e332497af541f3f Mon Sep 17 00:00:00 2001
From: streamich <streamich@gmail.com>
Date: Thu, 28 Mar 2019 18:59:09 +0100
Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20add=20useKeyboardJs=20ho?=
 =?UTF-8?q?ok?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                               |  2 +-
 docs/useKeyPress.md                     |  5 ----
 docs/useKeyboardJs.md                   | 31 +++++++++++++++++++++++++
 src/__stories__/useKeyboardJs.story.tsx | 31 +++++++++++++++++++++++++
 src/index.ts                            |  2 ++
 src/useKeyboardJs.ts                    | 27 +++++++++++++++++++++
 6 files changed, 92 insertions(+), 6 deletions(-)
 create mode 100644 docs/useKeyboardJs.md
 create mode 100644 src/__stories__/useKeyboardJs.story.tsx
 create mode 100644 src/useKeyboardJs.ts

diff --git a/README.md b/README.md
index e42abb2f..18956d92 100644
--- a/README.md
+++ b/README.md
@@ -36,7 +36,7 @@
   - [`useGeolocation`](./docs/useGeolocation.md) &mdash; tracks geo location state of user's device. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usegeolocation--demo)
   - [`useHover` and `useHoverDirty`](./docs/useHover.md) &mdash; tracks mouse hover state of some element. [![][img-demo]](https://codesandbox.io/s/zpn583rvx)
   - [`useIdle`](./docs/useIdle.md) &mdash; tracks whether user is being inactive.
-  - [`useKey`](./docs/useKey.md), [`useKeyPress`](./docs/useKeyPress.md), and [`useKeyPressEvent`](./docs/useKeyPressEvent.md) &mdash; track keys. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usekeypressevent--demo)
+  - [`useKey`](./docs/useKey.md), [`useKeyPress`](./docs/useKeyPress.md), [`useKeyPressEvent`](./docs/useKeyPressEvent.md), and [`useKeyboardJs`](./docs/useKeyboardJs.md) &mdash; track keys. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usekeypressevent--demo)
   - [`useLocation`](./docs/useLocation.md) &mdash; tracks page navigation bar location state.
   - [`useMedia`](./docs/useMedia.md) &mdash; tracks state of a CSS media query. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usemedia--demo)
   - [`useMediaDevices`](./docs/useMediaDevices.md) &mdash; tracks state of connected hardware devices.
diff --git a/docs/useKeyPress.md b/docs/useKeyPress.md
index 4cd43895..e7955115 100644
--- a/docs/useKeyPress.md
+++ b/docs/useKeyPress.md
@@ -3,11 +3,6 @@
 React UI sensor hook that detects when the user is pressing a specific
 key on their keyboard.
 
-Complex bindings like detecting when multiple keys are held down at the same
-time or requiring them to be held down in a specified order are also available
-via [KeyboardJS key combos](https://github.com/RobertWHurst/KeyboardJS).
-Check its documentation for further details on how to make combo strings.
-
 
 ## Usage
 
diff --git a/docs/useKeyboardJs.md b/docs/useKeyboardJs.md
new file mode 100644
index 00000000..a00700b2
--- /dev/null
+++ b/docs/useKeyboardJs.md
@@ -0,0 +1,31 @@
+# `useKeyboardJs`
+
+React UI sensor hook that detects complex key combos like detecting when
+multiple keys are held down at the same time or requiring them to be held down in a specified order.
+
+Via [KeyboardJS key combos](https://github.com/RobertWHurst/KeyboardJS).
+Check its documentation for further details on how to make combo strings.
+
+
+## Usage
+
+```jsx
+import useKeyboardJs from 'react-use/lib/useKeyboardJs';
+
+const Demo = () => {
+  const isPressed = useKeyboardJs('a + b');
+
+  return (
+    <div>
+      [a + b] pressed: {isPressed ? 'Yes' : 'No'}
+    </div>
+  );
+};
+```
+
+
+## Examples
+
+```js
+const isPressed = useKeyboardJs('a + b');
+```
diff --git a/src/__stories__/useKeyboardJs.story.tsx b/src/__stories__/useKeyboardJs.story.tsx
new file mode 100644
index 00000000..1cbad0e0
--- /dev/null
+++ b/src/__stories__/useKeyboardJs.story.tsx
@@ -0,0 +1,31 @@
+import {storiesOf} from '@storybook/react';
+import {withKnobs, text} from '@storybook/addon-knobs';
+import * as React from 'react';
+import {useKeyboardJs} from '..';
+import ShowDocs from '../util/ShowDocs';
+import {CenterStory} from './util/CenterStory';
+
+const Demo = ({combo}) => {
+  const pressed = useKeyboardJs(combo)
+
+  return (
+    <CenterStory>
+      <div style={{textAlign: 'center'}}>
+        Press <code style={{color: 'red', background: '#f6f6f6', padding: '3px 6px', borderRadius: '3px'}}>{combo}</code> combo
+        <br />
+        <br />
+        <div style={{fontSize: '4em'}}>
+          {pressed ? '💋' : ''}
+        </div>
+      </div>
+    </CenterStory>
+  );
+};
+
+storiesOf("Sensors|useKeyboardJs", module)
+  .addDecorator(withKnobs)
+  .add("Docs", () => <ShowDocs md={require("../../docs/useKeyPress.md")} />)
+  .add("Demo", () => {
+    const combo = text('Combo', 'i + l + u');
+    return <Demo combo={combo} />;
+  });
diff --git a/src/index.ts b/src/index.ts
index cfe17f24..91b72590 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -20,6 +20,7 @@ import useIdle from './useIdle';
 import useKey from './useKey';
 import useKeyPress from './useKeyPress';
 import useKeyPressEvent from './useKeyPressEvent';
+import useKeyboardJs from './useKeyboardJs';
 import useLifecycles from './useLifecycles';
 import useList from './useList';
 import useLocalStorage from './useLocalStorage';
@@ -86,6 +87,7 @@ export {
   useKey,
   useKeyPress,
   useKeyPressEvent,
+  useKeyboardJs,
   useLifecycles,
   useList,
   useLocalStorage,
diff --git a/src/useKeyboardJs.ts b/src/useKeyboardJs.ts
new file mode 100644
index 00000000..f7f8ce9a
--- /dev/null
+++ b/src/useKeyboardJs.ts
@@ -0,0 +1,27 @@
+import {useState, useEffect} from 'react';
+import useMount from './useMount';
+
+const useKeyboardJs = (combination: string) => {
+  const [state, set] = useState(false);
+  const [keyboardJs, setKeyboardJs] = useState<any>(null);
+
+  useMount(() => {
+    import('keyboardjs').then(setKeyboardJs);
+  });
+
+  useEffect(() => {
+    if (!keyboardJs) return;
+
+    const down = () => set(true);
+    const up = () => set(false);
+    keyboardJs.bind(combination, down, up);
+
+    return () => {
+      keyboardJs.unbind(combination, down, up);
+    };
+  }, [combination, keyboardJs]);
+
+  return state;
+};
+
+export default useKeyboardJs;