diff --git a/README.md b/README.md
index 67644b81e1..37fa1da662 100644
--- a/README.md
+++ b/README.md
@@ -52,8 +52,8 @@
- [**UI**](./docs/UI.md)
- [`useAudio`](./docs/useAudio.md) — plays audio and exposes its controls. [![][img-demo]](https://codesandbox.io/s/2o4lo6rqy)
+ - [`useClickAway`](./docs/useClickAway.md) — triggers callback when user clicks outside target area.
- [`useCss`](./docs/useCss.md) — dynamically adjusts CSS.
- - [`useOutsideClick`](./docs/useOutsideClick.md) — triggers callback when user clicks outside target area.
- [`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. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/ui-usevideo--demo)
- [`useWait`](./docs/useWait.md) — complex waiting management for UIs.
diff --git a/docs/useOutsideClick.md b/docs/useClickAway.md
similarity index 54%
rename from docs/useOutsideClick.md
rename to docs/useClickAway.md
index e13a7d6000..f32aea97ae 100644
--- a/docs/useOutsideClick.md
+++ b/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 (
diff --git a/package.json b/package.json
index 1f3d067a96..d7b4a2c983 100644
--- a/package.json
+++ b/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",
diff --git a/src/__stories__/useOutsideClick.story.tsx b/src/__stories__/useClickAway.story.tsx
similarity index 61%
rename from src/__stories__/useOutsideClick.story.tsx
rename to src/__stories__/useClickAway.story.tsx
index 2a2d70cfa4..6071222f90 100644
--- a/src/__stories__/useOutsideClick.story.tsx
+++ b/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', () => )
+storiesOf('UI|useClickAway', module)
+ .add('Docs', () => )
.add('Demo', () =>
)
diff --git a/src/index.ts b/src/index.ts
index 2f4ed986d5..c0c4a4cbbf 100644
--- a/src/index.ts
+++ b/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,
diff --git a/src/useClickAway.ts b/src/useClickAway.ts
new file mode 100644
index 0000000000..7e28b7bd5e
--- /dev/null
+++ b/src/useClickAway.ts
@@ -0,0 +1,17 @@
+import {RefObject, useEffect} from 'react';
+import {on, off} from './util';
+
+const useClickAway = (ref: RefObject, 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;
diff --git a/src/useOutsideClick.ts b/src/useOutsideClick.ts
deleted file mode 100644
index 2e794c4f71..0000000000
--- a/src/useOutsideClick.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import useOutsideClick from 'use-onclickoutside';
-
-export default useOutsideClick;