feat: 🎸 add useKeyboardJs hook

README.md

@@ -36,7 +36,7 @@
   - [`useGeolocation`](./docs/useGeolocation.md) — 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) — tracks mouse hover state of some element. [![][img-demo]](https://codesandbox.io/s/zpn583rvx)
   - [`useIdle`](./docs/useIdle.md) — tracks whether user is being inactive.
-  - [`useKey`](./docs/useKey.md), [`useKeyPress`](./docs/useKeyPress.md), and [`useKeyPressEvent`](./docs/useKeyPressEvent.md) — 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) — track keys. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usekeypressevent--demo)
   - [`useLocation`](./docs/useLocation.md) — tracks page navigation bar location state.
   - [`useMedia`](./docs/useMedia.md) — tracks state of a CSS media query. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usemedia--demo)
   - [`useMediaDevices`](./docs/useMediaDevices.md) — tracks state of connected hardware devices.

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
 

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');
+```

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} />;
+  });

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,

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;