Skip to content
~500B React Click Away Listener built with React Hooks
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
__tests__
src
.babelrc
.eslintrc
.gitignore
.travis.yml
LICENSE
README.md
logo.png
package.json
rollup.config.js
yarn.lock

README.md

~500B React Click Away Listener

npm travis code coverage downloads/month pullrequest firsttimersonly

Installation

yarn add react-click-away-listener

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="rest-of-the-app">Don't name a div like that :(</div>
		</div>
	);
};

Binding action creators to ClickAwayListeners

Action creators are whatever triggers your actions(onClick, onTouch), mostly a button but any element in general can have those handlers so ¯_(ツ)_/¯

How do we make sure there's no collision between them?

  • By adding a clickAwayId on ClickAwayListener
  • And preventClickaway dataset with the id specified

More like:

const id = "click-yay";

return (
	<ClickAwayListener onClickAway={fakeHandleClick} clickAwayId={id}>
		Hello World
	</ClickAwayListener>
	<button data-prevent-clickaway={id}>A button</button>
)

Examples

LICENSE

MIT

You can’t perform that action at this time.