Install with Yarn:
yarn add @omtanke/react-use-event-outside
Or with NPM:
npm i @omtanke/react-use-event-outside
Import into your component like so:
import useEventOutside from '@omtanke/react-use-event-outside';
useEventOutside(REF, EVENT_NAME, FUNCTION);
REF: Outside which element you want to trigger.
EVENT_NAME: You want to listen to the event (Ex: 'mousedown', 'touchstart', etc.).
FUNCTION: The function you want to run when triggered.
or
const App = () => {
const ref = useRef(null);
const [isOpen, setIsOpen] = useState(false);
const closeMenu = useCallback(() => {
setIsOpen(false);
}, []);
useEventOutside(ref, 'mousedown', closeMenu);
return (
<nav className="dropdown" ref={ref}>
<button onClick={() => setIsOpen(!isOpen)}>Toggle</button>
{isOpen &&
<ul className='dropdown-menu'>
<li className='dropdown-item'>Item</li>
<li className='dropdown-item'>Item</li>
</ul>
}
</nav>
);
};