Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ooade/react-click-away-listener
:paw_prints: Tiny React Click Away Listener built with React Hooks
https://github.com/ooade/react-click-away-listener
click-away click-outside event-handler react react-hooks
Last synced: 22 days ago
JSON representation
:paw_prints: Tiny React Click Away Listener built with React Hooks
- Host: GitHub
- URL: https://github.com/ooade/react-click-away-listener
- Owner: ooade
- License: mit
- Created: 2019-04-10T12:56:01.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2024-09-26T08:09:46.000Z (about 1 month ago)
- Last Synced: 2024-10-06T11:52:22.956Z (about 1 month ago)
- Topics: click-away, click-outside, event-handler, react, react-hooks
- Language: TypeScript
- Homepage:
- Size: 1.94 MB
- Stars: 174
- Watchers: 3
- Forks: 13
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
~700B React Click Away Listener
-welcome-brightgreen.svg?style=flat-square)
## 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
Example Button
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