realesh / react-click-away-listener

:paw_prints: Tiny React Click Away Listener built with React Hooks

~700B React Click Away Listener

Installation

yarn add react-click-away-listener

• It's quite small in size.
• It's built with TypeScript.
• It supports both Mouse and Touch Events.
• It works with Portals (>= v2).

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:

• Ensure the ClickAway component has just one child else React.only will throw an error.
• It doesn't work with Text nodes.

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

Examples

• A simple menu built with React Hooks

LICENSE

MIT