Tiny React Click Away Listener built with React Hooks

by React

react-click-away-listener

~700B React Click Away Listener.

View Demo View Github

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

GitHub