2.0.4 • Published 3 years ago

react-click-away-listener-brillx v2.0.4

Weekly downloads
-
License
MIT
Repository
github
Last release
3 years ago

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

NameTypeDefaultDescription
onClickAway(event) => voidFires 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

LICENSE

MIT