A React custom hook to detect clicks which triggers outside the element and then fire an event.

Make sure your react and react-dom version is 16.8.1 or higher. Internally on-outside-click-hook uses react hooks which is only supported after version 16.8.1 of react

$ yarn add on-outside-click-hook 

import useOnOutsideClick from 'on-outside-click-hook' const CustomComponent = () => { const elementInstance = useOnOutsideClick(() => alert('hello')) return <div ref={elementInstance}> <h1>Hello</h1> </div> } 

When we will use useOnOutsideClick in our functional components we have to pass it a function which will be called when click event triggers outside the target element. for e.g useOnOutsideClick(() => alert('hello'))

Also note when we call useOnOutsideClick it returns an elementInstance which is basically a ref which will be passed to the target element as a ref. This is how useOnOutsideClick tracks when the click event happens outside the element.

import useOnOutsideClick from 'on-outside-click-hook' const CustomComponent = () => { const elementInstance = useOnOutsideClick(() => alert('hello')) // elementInstance will be passed to div as a ref return <div ref={elementInstance}> <h1>Hello</h1> </div> }