~500B React Click Away Listener
-welcome-brightgreen.svg?style=flat-square){kind=icon}
Installation
yarn add react-click-away-listenerUsage
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
