From a03143a46f8acb859a304947b2f82e29f258b574 Mon Sep 17 00:00:00 2001 From: streamich Date: Mon, 25 Mar 2019 13:52:52 +0100 Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20implement=20useClickAway?= =?UTF-8?q?,=20remove=20useOutsideClick?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This re-implements outside click hook functionality from scratch, removes dependency on use-onoutsideclick package. BREAKING CHANGE: 🧨 useOutsideClick is now useClickAway --- README.md | 2 +- docs/{useOutsideClick.md => useClickAway.md} | 15 ++++----------- package.json | 3 +-- ...deClick.story.tsx => useClickAway.story.tsx} | 10 +++++----- src/index.ts | 5 ++--- src/useClickAway.ts | 17 +++++++++++++++++ src/useOutsideClick.ts | 3 --- 7 files changed, 30 insertions(+), 25 deletions(-) rename docs/{useOutsideClick.md => useClickAway.md} (54%) rename src/__stories__/{useOutsideClick.story.tsx => useClickAway.story.tsx} (61%) create mode 100644 src/useClickAway.ts delete mode 100644 src/useOutsideClick.ts 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;