https://github.com/zestgeek/on-outside-click-hook
A React custom hook to detect clicks which triggers outside the element and then fire an event.
https://github.com/zestgeek/on-outside-click-hook
hooks hooks-api-react javascript outsideclick react reactjs
Last synced: 8 months ago
JSON representation
A React custom hook to detect clicks which triggers outside the element and then fire an event.
- Host: GitHub
- URL: https://github.com/zestgeek/on-outside-click-hook
- Owner: zestgeek
- Created: 2019-02-12T19:57:58.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2020-04-05T12:34:34.000Z (about 6 years ago)
- Last Synced: 2025-10-11T15:57:41.226Z (8 months ago)
- Topics: hooks, hooks-api-react, javascript, outsideclick, react, reactjs
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/on-outside-click-hook
- Size: 25.4 KB
- Stars: 16
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
on-outside-click-hook
======
A React custom hook to detect clicks which triggers outside the element and then fire an event.
> Make sure your `react` and `react-dom` version is `16.8.1` or higher. Internally `on-outside-click-hook` uses react hooks which is only supported after version `16.8.1` of `react`
## How to install
```
$ yarn add on-outside-click-hook
```
## Usage
```javascript
import useOnOutsideClick from 'on-outside-click-hook'
const CustomComponent = () => {
const elementInstance = useOnOutsideClick(() => alert('hello'))
return
Hello
}
```
useOnOutsideClick(func:function)
-----------------------
#### Fires passed function when click event triggers outside the target element
When we will use `useOnOutsideClick` in our functional components we have to pass it a function which will be called when click event triggers outside the target element. for e.g `useOnOutsideClick(() => alert('hello'))`
Also note when we call `useOnOutsideClick` it returns an `elementInstance` which is basically a `ref` which will be passed to the `target` element as a ref. This is how `useOnOutsideClick` tracks when the click event happens outside the element.
```javascript
import useOnOutsideClick from 'on-outside-click-hook'
const CustomComponent = () => {
const elementInstance = useOnOutsideClick(() => alert('hello'))
// elementInstance will be passed to div as a ref
return
Hello
}
```
### Contributers
[
](http://zestgeek.com)
[
](http://www.recraftrelic.com)