Closing pop-ups by clicking outside in React

react-click-outside.js

// Making a gist, because I know I'm going to have to find this again...
// Of course, this is a terrible hack. I recommend this only to the desperate (and those who don't want to use mixins.)

componentWillReceiveProps(nextProps) {
  if (nextProps.isOpen) {
    window.addEventListener('mousedown', this.pageClick, false)
  } else {
    window.removeEventListener('mousedown', this.pageClick, false)
  }
}

componentWillUnmount() {
  window.removeEventListener('mousedown', this.pageClick, false)
}

pageClick(e) {
  let box = this.refs.popover.getBoundingClientRect()

  // Click is outside of the bounding client
  let outsizeWidthWise = (e.clientX > box.right || e.clientX < box.left)
  let outsizeHeightWise = (e.clientY > box.bottom || e.clientY < box.top)

  if (outsizeWidthWise || outsizeHeightWise) {
    this.props.functionThatClosesThePopOver()
  }
}

render() {
  return (
    <div ref="popover">
      This is the popover.
    </div>
  )
}