feat: 🎸 add useOutsideClick hook

README.md

@@ -48,6 +48,7 @@
     <br/>
 - [**UI**](./docs/UI.md)
   - [`useAudio`](./docs/useAudio.md) &mdash; plays audio and exposes its controls. [![][img-demo]](https://codesandbox.io/s/2o4lo6rqy)
+  - [`useOutsideClick`](./docs/useOutsideClick.md) &mdash; triggers callback when user clicks outside target element.
   - [`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.
     <br/>

docs/useOutsideClick.md

@@ -0,0 +1,26 @@
+# `useOutsideClick`
+
+React UI hook that triggers a callback when user
+clicks outside the a target element.
+
+
+## Usage
+
+```jsx
+import {useOutsideClick} from 'react-use';
+
+const Demo = () => {
+  const ref = useRef(null);
+  useOutsideClick(ref, () => {
+    console.log('OUTSIDE CLICKED');
+  });
+
+  return (
+    <div ref={ref} style={{
+      width: 200,
+      height: 200,
+      background: 'red',
+    }} />
+  );
+};
+```

package.json

@@ -35,7 +35,8 @@
     "throttle-debounce": "^2.0.1",
     "nano-css": "^3.4.0",
     "rebound": "^0.1.0",
-    "ts-easing": "^0.1.0"
+    "ts-easing": "^0.1.0",
+    "use-onclickoutside": "^0.1.0"
   },
   "devDependencies": {
     "@storybook/react": "^3.4.11",

src/__stories__/useOutsideClick.story.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import {storiesOf} from '@storybook/react';
+import {useOutsideClick} from '..';
+import {useRef} from '../react';
+import ShowDocs from '../util/ShowDocs';
+
+const Demo = () => {
+  const ref = useRef(null);
+  useOutsideClick(ref, () => {
+    console.log('OUTSIDE CLICKED');
+  });
+
+  return (
+    <div ref={ref} style={{
+      width: 200,
+      height: 200,
+      background: 'red',
+    }} />
+  );
+};
+
+storiesOf('useOutsideClick', module)
+  .add('Docs', () => <ShowDocs md={require('../../docs/useOutsideClick.md')} />)
+  .add('Demo', () =>
+    <Demo/>
+  )

src/index.ts

@@ -25,6 +25,7 @@ import useNetwork from './useNetwork';
 import useNumber from './useNumber';
 import useObservable from './useObservable';
 import useOrientation from './useOrientation';
+import useOutsideClick from './useOutsideClick';
 import useRaf from './useRaf';
 import useSetState from './useSetState';
 import useSize from './useSize';
@@ -67,6 +68,7 @@ export {
   useNumber,
   useObservable,
   useOrientation,
+  useOutsideClick,
   useRaf,
   useSetState,
   useSize,

src/useOutsideClick.ts

@@ -0,0 +1,3 @@
+import useOutsideClick from 'use-onclickoutside';
+
+export default useOutsideClick;

yarn.lock

@@ -9512,6 +9512,11 @@ url@^0.11.0:
     punycode "1.3.2"
     querystring "0.2.0"
 
+use-onclickoutside@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/use-onclickoutside/-/use-onclickoutside-0.1.0.tgz#bc1998fe36728b22a4b9b28c95fbb468b3033e84"
+  integrity sha512-yDtIbzU38VXkwZaCbDm9Yy+j5n5b4roBJw98iauFPJm2VWVa0xRKFYP8fz5OvICFizKAtgICwPVHJ3Or2/tIOA==
+
 use@^3.1.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"