React Click Away Event Listener

This is a react component that listens for click events outside of the component's bounds and calls a callback.

Installation

npm i click-away-event-listener

or

yarn add click-away-event-listener

or

pnpm add click-away-event-listener

Usage

import ClickAwayEventListener from "click-away-event-listener";

const MyComponent = () => {
	const [open, setOpen] = useState(false);

	const handleClickAway = () => {
		setOpen(false);
	};
	return (
		<ClickAwayEventListener onClickAway={handleClickAway}>
			<div>
				<button onClick={() => setOpen(true)}>Open</button>
				{open && (
					<div>
						<button>Close</button>
					</div>
				)}
			</div>
		</ClickAwayEventListener>
	);
};

NOTE: Children must be a single element and can be given ref.