feat: 🎸 implement useClickAway, remove useOutsideClick

This re-implements outside click hook functionality from scratch,
removes dependency on use-onoutsideclick package.

BREAKING CHANGE: 🧨 useOutsideClick is now useClickAway

README.md

@@ -52,8 +52,8 @@
     <br/>
 - [**UI**](./docs/UI.md)
   - [`useAudio`](./docs/useAudio.md) &mdash; plays audio and exposes its controls. [![][img-demo]](https://codesandbox.io/s/2o4lo6rqy)
+  - [`useClickAway`](./docs/useClickAway.md) &mdash; triggers callback when user clicks outside target area.
   - [`useCss`](./docs/useCss.md) &mdash; dynamically adjusts CSS.
-  - [`useOutsideClick`](./docs/useOutsideClick.md) &mdash; triggers callback when user clicks outside target area.
   - [`useSpeech`](./docs/useSpeech.md) &mdash; synthesizes speech from a text string. [![][img-demo]](https://codesandbox.io/s/n090mqz69m)
   - [`useVideo`](./docs/useVideo.md) &mdash; plays video, tracks its state, and exposes playback controls. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/ui-usevideo--demo)
   - [`useWait`](./docs/useWait.md) &mdash; complex waiting management for UIs.

docs/useOutsideClick.md → docs/useClickAway.md

@@ -1,25 +1,18 @@
-# `useOutsideClick`
+# `useClickAway`
 
 React UI hook that triggers a callback when user
 clicks outside the target element.
 
-Requires `use-onclickoutside`:
-
-```bash
-npm add use-onclickoutside
-# or
-yarn add use-onclickoutside
-```
 
 ## Usage
 
 ```jsx
-import {useOutsideClick} from 'react-use';
+import {useClickAway} from 'react-use';
 
 const Demo = () => {
   const ref = useRef(null);
-  useOutsideClick(ref, () => {
-    console.log('OUTSIDE CLICKED');
+  useClickAway(ref, () => {
+    alert('OUTSIDE CLICKED');
   });
 
   return (

package.json

@@ -33,8 +33,7 @@
     "nano-css": "^5.0.0",
     "react-wait": "^0.3.0",
     "throttle-debounce": "^2.0.1",
-    "ts-easing": "^0.2.0",
-    "use-onclickoutside": "^0.3.0"
+    "ts-easing": "^0.2.0"
   },
   "devDependencies": {
     "@types/react": "^16.8.2",

src/__stories__/useOutsideClick.story.tsx → src/__stories__/useClickAway.story.tsx

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import {storiesOf} from '@storybook/react';
-import {useOutsideClick} from '..';
+import {useClickAway} from '..';
 import {useRef} from 'react';
 import ShowDocs from '../util/ShowDocs';
 
 const Demo = () => {
   const ref = useRef(null);
-  useOutsideClick(ref, () => {
-    console.log('OUTSIDE CLICKED');
+  useClickAway(ref, () => {
+    alert('OUTSIDE CLICKED');
   });
 
   return (
@@ -19,8 +19,8 @@ const Demo = () => {
   );
 };
 
-storiesOf('UI|useOutsideClick', module)
-  .add('Docs', () => <ShowDocs md={require('../../docs/useOutsideClick.md')} />)
+storiesOf('UI|useClickAway', module)
+  .add('Docs', () => <ShowDocs md={require('../../docs/useClickAway.md')} />)
   .add('Demo', () =>
     <Demo/>
   )

src/index.ts

@@ -30,7 +30,7 @@ import useNetwork from './useNetwork';
 import useNumber from './useNumber';
 import useObservable from './useObservable';
 import useOrientation from './useOrientation';
-import useOutsideClick from './useOutsideClick';
+import useClickAway from './useClickAway';
 import usePromise from './usePromise';
 import useRaf from './useRaf';
 import useRefMounted from './useRefMounted';
@@ -59,7 +59,7 @@ export {
   useAudio,
   useBattery,
   useBoolean,
-  useCallbag,
+  useClickAway,
   useCounter,
   useCss,
   useDebounce,
@@ -86,7 +86,6 @@ export {
   useNumber,
   useObservable,
   useOrientation,
-  useOutsideClick,
   usePromise,
   useRaf,
   useRefMounted,

src/useClickAway.ts

@@ -0,0 +1,17 @@
+import {RefObject, useEffect} from 'react';
+import {on, off} from './util';
+
+const useClickAway = (ref: RefObject<HTMLElement | null>, onClickAway: () => void) => {
+  useEffect(() => {
+    const handler = (event) => {
+      const {current: el} = ref;
+      el && !el.contains(event.target) && onClickAway();
+    };
+    on(document, 'click', handler);
+    return () => {
+      off(document, 'click', handler);
+    };
+  });
+};
+
+export default useClickAway;