a react hook for binding an event to a click outside an element

click_away_effect.js

import { useEffect } from 'react'

function clickAwayListener (elementId, callback) {
  return event => {
    const outsideClick = !document.getElementById(elementId).contains(event.target)
    if (outsideClick) {
      callback()
    }
  }
}

export function useClickAway (elementId, callback) {
  useEffect(() => {
    document.addEventListener('click', clickAwayListener(elementId, callback))
    return document.removeEventListener('click', clickAwayListener(elementId, callback))
  }, [])
}