is a React to trigger callback when user clicks outside of the target component(s) area. It's a useful logic for UI interaction design (IxD) like dismiss a dropdown menu, modal or tooltip etc. Help you guys ❤️ it. ⚡️ Live demo: react-cool-onclickoutside hook https://react-cool-onclickoutside.netlify.app Features 🎣 Listens for clicks outside based on React . hook 👯♀️ Supports multiple refs to cover more use cases. 🧻 Uses to improve scrolling performance. passive event listeners ⛔️ Scrollbar can be excluded from the callback of outside clicks. 🙈 during the event loop. Ignores certain elements 🙉 Enables you to stop listening for outside clicks when needed. 🪟 for better DX. Detects iframe clicks 🔩 Supports custom refs for . some reasons 📜 Supports type definition. TypeScript 🗄️ Server-side rendering friendly. 🦔 Tiny size ( ). No external dependencies, aside for the . > 1kB gzipped react Quick Start ( ) demo code Common use case. { useState } ; useOnclickOutside ; Dropdown = { [openMenu, setOpenMenu] = useState( ); ref = useOnclickOutside( { setOpenMenu( ); }); handleClickBtn = { setOpenMenu(!openMenu); }; ( <button onClick={handleClickBtn}>Button</button> <div ref={ref}>Menu</div> ); }; import from "react" import from "react-cool-onclickoutside" const => () const false const => () false const => () return < > div {openMenu && } </ > div Support multiple refs. Callback only be triggered when user clicks outside of the registered components. { useState } ; useOnclickOutside ; App = { [showTips, setShowTips] = useState( ); ref = useOnclickOutside( { setShowTips( ); }); ( <div ref={ref}>Tooltip 1</div> <div ref={ref}>Tooltip 2</div> ); }; import from "react" import from "react-cool-onclickoutside" const => () const true const => () false return {showTips && ( < > div <> )} </> </ > div Ignore Elements by CSS Class Name You can tell to ignore certain elements during the event loop by the CSS class name. If you want explicit control over the class name, use the option. react-cool-onclickoutside ignore-onclickoutside ignoreClass { useState } ; useOnclickOutside ; App = { ref = useOnclickOutside( { }); ( <div ref={ref}>I'm a 🍕</div> <div>Click me will trigger the event's callback</div> <div className="ignore-onclickoutside"> Click me won't trigger the event's callback </div> ); }; App = { ref = useOnclickOutside( { }, { : } ); ( <div ref={ref}>I'm a 🍕</div> <div>Click me will trigger the event's callback</div> <div className="my-ignore-class"> Click me won't trigger the event's callback </div> ); }; import from "react" import from "react-cool-onclickoutside" // Use the default CSS class name const => () const => () // Do something... return < > div </ > div // Use your own CSS class name const => () const => () // Do something... ignoreClass "my-ignore-class" return < > div </ > div Disabling the Event Listener In case you want to disable the event listener for performance reasons or fulfill some use cases. We provide the option for you. Once you set it as , the callback won’t be triggered. disabled true { useState } ; useOnclickOutside ; App = { [disabled, setDisabled] = useState( ); ref = useOnclickOutside( { }, { disabled } ); handleBtnClick = { setDisabled( ); }; ( <button onClick={handleBtnClick}> Stop listening for outside clicks </button> <div ref={ref}>I'm a 🍎</div> ); }; import from "react" import from "react-cool-onclickoutside" const => () const false const => () // Do something... const => () true return < > div </ > div Thanks for reading, for more usage details checkout the project's GitHub page: https://github.com/wellyshen/react-cool-onclickoutside You can also install this package is distributed via . npm $ yarn add react-cool-onclickoutside # or $ npm install --save react-cool-onclickoutside
