feat: 🎸 add useStartTypings hook

README.md

@@ -47,6 +47,7 @@
   - [`usePageLeave`](./docs/usePageLeave.md) — triggers when mouse leaves page boundaries.
   - [`useScroll`](./docs/useScroll.md) — tracks an HTML element's scroll position. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usescroll--docs)
   - [`useSize`](./docs/useSize.md) — tracks an HTML element's dimensions.
+  - [`useStartTyping`](./docs/useStartTyping.md) — detects when user starts typing.
   - [`useWindowScroll`](./docs/useWindowScroll.md) — tracks `Window` scroll position. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usewindowscroll--docs)
   - [`useWindowSize`](./docs/useWindowSize.md) — tracks `Window` dimensions. [![][img-demo]](https://codesandbox.io/s/m7ln22668)
     <br/>

docs/useStartTyping.md

@@ -0,0 +1,16 @@
+# `useStartTyping`
+
+React sensor hook that fires a callback when user start typing. Can be use
+to focus default input field on the page.
+
+## Usage
+
+```jsx
+import useStartTyping from 'react-use/lib/useStartTyping';
+
+const Demo = () => {
+  useStartTyping(() => alert('Started typing...'));
+
+  return null;
+};
+```

src/__stories__/useStartTyping.story.tsx

@@ -0,0 +1,41 @@
+import {storiesOf} from '@storybook/react';
+import * as React from 'react';
+import {useStartTyping} from '..';
+import ShowDocs from './util/ShowDocs';
+
+const Demo = () => {
+  const input = React.useRef(null);
+  useStartTyping(() => {
+    if (input.current) {
+      input.current.focus();
+    }
+  });
+
+  return (
+    <div>
+      <p>Start typing, and below field will get focused.</p>
+      <input ref={input} />
+
+      <br />
+      <hr />
+
+      <p>Try focusing below elements and see what happens.</p>
+      <button>When button is focused, it will lose it.</button>
+      <br />
+      <br />
+      <input />
+      <br />
+      <br />
+      <textarea>Editable textarea</textarea>
+      <br />
+      <br />
+      <div contentEditable>Editable DIV</div>
+    </div>
+  );
+};
+
+storiesOf('Sensors|useStartTyping', module)
+  // .add('Docs', () => <ShowDocs md={require('../../docs/useStartTyping.md')} />)
+  .add('Demo', () =>
+    <Demo/>
+  )

src/index.ts

@@ -51,6 +51,7 @@ import useSetState from './useSetState';
 import useSize from './useSize';
 import useSpeech from './useSpeech';
 import useSpring from './useSpring';
+import useStartTyping from './useStartTyping';
 import useThrottle from './useThrottle';
 import useThrottleFn from './useThrottleFn';
 import useTimeout from './useTimeout';
@@ -119,6 +120,7 @@ export {
   useSize,
   useSpeech,
   useSpring,
+  useStartTyping,
   useThrottle,
   useThrottleFn,
   useTimeout,

src/useStartTyping.ts

@@ -0,0 +1,42 @@
+import {useLayoutEffect} from 'react';
+
+const isFocusedElementEditable = () => {
+  const {activeElement, body} = document;
+
+  // If not element has focus, we assume it is not editable, too.
+  if (activeElement === body) return false;
+
+  // Assume <input> and <textarea> elements are editable.
+  switch (activeElement.tagName) {
+    case 'INPUT':
+    case 'TEXTAREA':
+      return true;
+  }
+
+  // Check if any other focused element id editable.
+  return activeElement.hasAttribute('contenteditable');
+};
+
+const isTypedCharGood = ({keyCode}: KeyboardEvent) => {
+  // 0...9
+  if ((keyCode >= 48) && (keyCode <= 57)) return true;
+  // a...z
+  if ((keyCode >= 65) && (keyCode <= 90)) return true;
+  // All other keys.
+  return false;
+};
+
+const useStartTyping = (onStartTyping: (event: KeyboardEvent) => void) => {
+  useLayoutEffect(() => {
+    const keydown = (event) => {
+      !isFocusedElementEditable() && isTypedCharGood(event) && onStartTyping(event);
+    };
+
+    document.addEventListener('keydown', keydown);
+    return () => {
+      document.removeEventListener('keydown', keydown);
+    };
+  }, []);
+};
+
+export default useStartTyping;