Installation

npm install react-click-away-listener

or

yarn add react-click-away-listener

• It's quite small in size! Just minified, or minified & gzipp’d.
• It's built with TypeScript.
• It works with React Portals (v2.0.0 onwards).
• It supports mouse, touch and focus events.

Usage

import ClickAwayListener from 'react-click-away-listener';

const App = () => {
	const handleClickAway = () => {
		console.log('Maybe close the popup');
	};

	return (
		<div id="app">
			<ClickAwayListener onClickAway={handleClickAway}>
				<div>
					{' '}
					Triggers whenever a click event is registered outside this div element{' '}
				</div>
			</ClickAwayListener>
		</div>
	);
};

Caveats

v2.0.0 has breaking changes which uses the React.Children.only API.

Note: React.Children.only is considered a legacy API as of React 19. See the React docs for details.

Thus, the following caveats apply for the children of the <ClickAwayListener> component:

1. You may pass only one child to the <ClickAwayListener> component.
2. You may not pass plain text nodes to the <ClickAwayListener> component.

Violating the above caveats will result in the following error:

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 like so:

// Assume the `handleClickAway` function is defined.
<ClickAwayListener onClickAway={handleClickAway}>
	<>
		<p>First paragraph</p>
		<button>Example Button</button>
		<p>Second paragraph</p>
	</>
</ClickAwayListener>

Or if you only have text nodes, you can also wrap them in a React Fragment like so:

// Assume the `handleClickAway` function is defined.
<ClickAwayListener onClickAway={handleClickAway}>
	<>First text node Second text node</>
</ClickAwayListener>

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 | | extraEvents | Array<keyof DocumentEventMap> | | Extra events to listen for (e.g. keydown) |

Examples

• A simple menu built with React Hooks (Note: this example may use an older version of React)

LICENSE

MIT