react-click-outside-listener
Wrapping component to register click outside.
Demo
Here is a small playground with couple of examples.
Installation
As any other npm package react-click-outside-listener
can be added to your project by following command:
npm i -S react-click-outside-listener
It requires any version of react with new context API support as peer dependency, so it should be installed as well.
npm i -S react
Quick start
Nothing is easier than use ClickOutsideListener
component - just wrap your content with it:
; const Parent = { const handleClickOutside = ...; return <ClickOutsideListener onClickOutside= handleClickOutside > <div>Just put your content inside</div> <div>You can put several elements if you need</div> <div>ClickOutsideListener component will call listener only if none of those clicked</div> <div> <div>Of course we can nest items</div> </div> </ClickOutsideListener> ;}
It is only possible to track clicks on html elements, so children should be html elements or React components forwarding refs:
const Child = React; const Parent = { ... return <ClickOutsideListener onClickOutside= handleClickOutside > <Child /> </ClickOutsideListener> ;}
If you need to support custom properties for refs or want to track selected items, use render prop as a child:
const Parent = { return <ClickOutsideListener onClickOutside= handleClickOutside > <div> Click here to invoke callback <div ref= > No callback when click here </div> <div>Beware callbacks</div> <div ref= > Another safe zone </div> </div> </ClickOutsideListener> ;}
renderProp argument can be also used as regular ref:
const Component = { return <ClickOutsideListener onClickOutside= handleClickOutside > <div> <div ref= ref > No callback when click here </div> </div> </ClickOutsideListener> ;}
Let's consider small example with dropdown menu:
const Menu = { const isShown setIsShown = ; const toggleMenu = ; const handleClickOutside = ; return <ul className="menu"> <ClickOutsideListener onClickOutside= handleClickOutside > <ReactFragment> <button className="menu__trigger" onClick= toggleMenu ref= > label </button> <Dropdown items= items wrapperRef= /> </ReactFragment> </ClickOutsideListener> </ul> ;} ... const Dropdown = <ul className='dropdown' ref= wrapperRef > items </ul>;
Hook
react-click-outside-listener
package also exposes hook to achieve the same functionality. It returns refs
item similar to ClickOutsideListener
renderProp argument. It cab be used to set several refs or only one:
; const Component = { const refs = ; // several refs return <div> Click here to invoke callback <div ref= > No callback when click here </div> <div>Beware callbacks</div> <div ref= > Another safe zone </div> </div> ;} // or const Component = { const ref = ; // one ref return <div> <div ref= ref > No callback when click here </div> </div> ;}