react-click-away-listener

~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.

Usage

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

const App = () => {
	const handleClickAway = () => {
		console.log('Hey, you can close the Popup now');
	};

	return (
		<div id="app">
			<ClickAwayListener onClickAway={handleClickAway}>
				<div> Some Popup, Nav or anything </div>
			</ClickAwayListener>
			<div id="something-else">Hola, mi amigos</div>
		</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

Prop	Default value	Description
onClickAway	undefined	Fires when a user clicks outside the click away component
as	div	The rendered element type
mouseEvent	click	The mouse event type that gets fired on ClickAway
touchEvent	touchend	The touch event type that gets fired on ClickAway

Examples

• A simple menu built with React Hooks

LICENSE

MIT