feat: 🎸 add useIdle hook

Author: streamich

README.md

@@ -1,5 +1,7 @@
 # react-use
 
+![](https://img.shields.io/badge/React-%F0%9F%8E%A3%20hooks-orange.svg?longCache=true&style=flat)
+
 Collection of essential React Hooks.
 This is port of [`libreact`](https://github.com/streamich/libreact) to React Hooks.
 
@@ -15,6 +17,7 @@ This is port of [`libreact`](https://github.com/streamich/libreact) to React Hoo
    - [`useBattery`](./docs/useBattery.md)
    - [`useGeolocation`](./docs/useGeolocation.md)
    - [`useHover`](./docs/useHover.md)
+   - [`useIdle`](./docs/useIdle.md)
    - [`useLocation`](./docs/useLocation.md)
    - [`useMedia`](./docs/useMedia.md)
    - [`useMediaDevices`](./docs/useMediaDevices.md)

docs/useIdle.md

@@ -0,0 +1,30 @@
+# `useIdle`
+
+React sensor hook that tracks if user on the page is idle.
+
+
+## Usage
+
+```jsx
+import {useIdle} from 'react-use';
+
+const Demo = () => {
+  const isIdle = useIdle(3e3);
+
+  return (
+    <div>
+      <div>Use is idle: {isIdle ? 'Yes' : 'No'}</div>
+    </div>
+  );
+};
+```
+
+
+## Reference
+
+```js
+useIdle(ms, initialState);
+```
+
+- `ms` &mdash; time in milliseconds after which to consider use idle, defaults to `60e3` &mdash; one minute.
+- `initialState` &mdash; whether to consider user initially idle, defaults to false.

package.json

@@ -14,7 +14,8 @@
   "license": "Unlicense",
   "dependencies": {
     "@types/react": "^16.4.18",
-    "@types/react-dom": "^16.0.9"
+    "@types/react-dom": "^16.0.9",
+    "throttle-debounce": "^2.0.1"
   },
   "devDependencies": {
     "@storybook/react": "^3.4.11",

src/__stories__/useIdle.story.tsx

@@ -0,0 +1,18 @@
+import {storiesOf} from '@storybook/react';
+import * as React from 'react';
+import {useIdle} from '..';
+
+const Demo = () => {
+  const isIdle = useIdle(3e3);
+
+  return (
+    <div>
+      <div>Use is idle: {isIdle ? 'Yes' : 'No'}</div>
+    </div>
+  );
+};
+
+storiesOf('useIdle', module)
+  .add('Example', () =>
+    <Demo/>
+  )

src/index.ts

@@ -2,6 +2,7 @@ import useBattery from './useBattery';
 import useCounter from './useCounter';
 import useGeolocation from './useGeolocation';
 import useHover from './useHover';
+import useIdle from './useIdle';
 import useList from './useList';
 import useLocation from './useLocation';
 import useMap from './useMap';
@@ -19,6 +20,7 @@ export {
   useCounter,
   useGeolocation,
   useHover,
+  useIdle,
   useList,
   useLocation,
   useMap,

src/useIdle.ts

@@ -0,0 +1,49 @@
+import {useState, useEffect} from './react';
+import {on, off} from './util';
+import {throttle} from 'throttle-debounce';
+
+const defaultEvents = ['mousemove', 'mousedown', 'resize', 'keydown', 'touchstart', 'wheel'];
+const oneMinute = 60e3;
+
+const useIdle = (ms: number = oneMinute, initialState: boolean = false, events: string[] = defaultEvents): boolean => {
+  const [state, setState] = useState<boolean>(initialState);
+
+  useEffect(() => {
+    let timeout: any;
+    let localState: boolean = state;
+    const set = (newState: boolean) => {
+      localState = newState;
+      setState(newState);
+    };
+
+    const onEvent = throttle(50, () => {
+      if (localState) {
+        set(false);
+      }
+  
+      clearTimeout(timeout);
+      timeout = setTimeout(() => set(true), ms);
+    });
+    const onVisibility = () => {
+      if (!document.hidden) onEvent();
+    };
+
+    for (let i = 0; i < events.length; i++) {
+      on(window, events[i], onEvent);
+    }
+    on(document, 'visibilitychange', onVisibility);
+
+    timeout = setTimeout(() => set(true), ms);
+
+    return () => {
+      for (let i = 0; i < events.length; i++) {
+        off(window, events[i], onEvent);
+      }
+      off(document, 'visibilitychange', onVisibility);
+    };
+  }, events);
+
+  return state;
+};
+
+export default useIdle;

yarn.lock

@@ -6487,6 +6487,11 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
   integrity sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=
 
+throttle-debounce@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/throttle-debounce/-/throttle-debounce-2.0.1.tgz#7307ddd6cd9acadb349132fbf6c18d78c88a5e62"
+  integrity sha512-Sr6jZBlWShsAaSXKyNXyNicOrJW/KtkDqIEwHt4wYwWA2wa/q67Luhqoujg48V8hTk60wB56tYrJJn6jc2R7VA==
+
 through2@^2.0.0:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/through2/-/through2-2.0.3.tgz#0004569b37c7c74ba39c43f3ced78d1ad94140be"