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"