useClickOutside

Hooks used in this custom hook: useEffect

In Chapter 8, Use Ref to Hide Stuff, we learned about a case where we can detect when a user clicks outside a component. This feature is pretty generic and we want to take advantage of this in various parts of the project, such as dismissing a modal or tooltip – see Figure 9.5.

Figure 9.5 – useClickOutside hook

Let's see if we can refactor the old code a bit and turn it into a custom useClickOutside hook:

function useClickOutside(ref, handler) {
  useEffect(() => {
    const evt = e => {
      if (!ref.current) return 
      if (!ref.current.contains(e.target)) {
        handler && handler()
      }
    }  
    window.addEventListener("mousedown&quot...