## Installation
```sh
npm install react-click-away-listener
```
or
```sh
yarn add react-click-away-listener
```
- It's quite **small** in size! Just [')](https://bundlephobia.com/result?p=react-click-away-listener) minified, or [')](https://bundlephobia.com/result?p=react-click-away-listener) minified & gzipp’d.
- It's built with **TypeScript**.
- It works with [React Portals](https://reactjs.org/docs/portals.html) ([v2.0.0](https://github.com/ooade/react-click-away-listener/releases/tag/v2.0.0) onwards).
- It supports **mouse**, **touch** and **focus** events.
## Usage
```jsx
import ClickAwayListener from 'react-click-away-listener';
const App = () => {
const handleClickAway = () => {
console.log('Maybe close the popup');
};
return (
{' '}
Triggers whenever a click event is registered outside this div element{' '}
);
};
```
### Caveats
[v2.0.0](https://github.com/ooade/react-click-away-listener/releases/tag/v2.0.0) has breaking changes which uses the [`React.Children.only`](https://reactjs.org/docs/react-api.html#reactchildrenonly) API.
Thus, the following caveats apply for the `children` of the `` component:
1. You may pass **only one child** to the `` component.
2. You may not pass plain text nodes to the `` component.
Violating the above caveats will result in the following error:
```js
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of `ClickAwayListener`.
```
If you have multiple child components to pass, you can simply wrap them around a [React Fragment](https://reactjs.org/docs/fragments.html) like so:
```jsx
// Assume the `handleClickAway` function is defined.
<>
First paragraph
Second paragraph
```
Or if you only have text nodes, you can also wrap them in a [React Fragment](https://reactjs.org/docs/fragments.html) like so:
```jsx
// Assume the `handleClickAway` function is defined.
<>First text node Second text node
```
## Props
| Name | Type | Default | Description |
| ----------- | ------------------------------------------- | ---------- | --------------------------------------------------------- |
| onClickAway | (event) => void | | Fires when a user clicks outside the click away component |
| mouseEvent | 'click' \| 'mousedown' \| 'mouseup' | 'click' | The mouse event type that gets fired on ClickAway |
| touchEvent | 'touchstart' \| 'touchend' | 'touchend' | The touch event type that gets fired on ClickAway |
| focusEvent | 'focusin' \| 'focusout' | 'focusin' | The focus event type that gets fired on ClickAway |
## Examples
- [A simple menu built with React Hooks](https://codesandbox.io/s/52384lyo8p)
## LICENSE
MIT
-welcome-brightgreen.svg?style=flat-square){kind=icon}
