diff --git a/README.md b/README.md
index 1b63a1ad32..cec7406bc0 100644
--- a/README.md
+++ b/README.md
@@ -48,6 +48,7 @@
- [**UI**](./docs/UI.md)
- [`useAudio`](./docs/useAudio.md) — plays audio and exposes its controls. [![][img-demo]](https://codesandbox.io/s/2o4lo6rqy)
+ - [`useOutsideClick`](./docs/useOutsideClick.md) — triggers callback when user clicks outside target element.
- [`useSpeech`](./docs/useSpeech.md) — synthesizes speech from a text string. [![][img-demo]](https://codesandbox.io/s/n090mqz69m)
- [`useVideo`](./docs/useVideo.md) — plays video, tracks its state, and exposes playback controls.
diff --git a/docs/useOutsideClick.md b/docs/useOutsideClick.md
new file mode 100644
index 0000000000..35001828b0
--- /dev/null
+++ b/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 (
+
+ );
+};
+```
diff --git a/package.json b/package.json
index 051a37fd5b..6af24512e3 100644
--- a/package.json
+++ b/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",
diff --git a/src/__stories__/useOutsideClick.story.tsx b/src/__stories__/useOutsideClick.story.tsx
new file mode 100644
index 0000000000..4422c02b39
--- /dev/null
+++ b/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 (
+
+ );
+};
+
+storiesOf('useOutsideClick', module)
+ .add('Docs', () => )
+ .add('Demo', () =>
+
+ )
diff --git a/src/index.ts b/src/index.ts
index 171e825f4c..5f22c831bb 100644
--- a/src/index.ts
+++ b/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,
diff --git a/src/useOutsideClick.ts b/src/useOutsideClick.ts
new file mode 100644
index 0000000000..2e794c4f71
--- /dev/null
+++ b/src/useOutsideClick.ts
@@ -0,0 +1,3 @@
+import useOutsideClick from 'use-onclickoutside';
+
+export default useOutsideClick;
diff --git a/yarn.lock b/yarn.lock
index 869493b8ff..481ea5ab4c 100644
--- a/yarn.lock
+++ b/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"