withClickOutside

gistfile1.txt

import React from 'react'

const withClickOutside = Component => {
  class Wrapped extends React.Component {
    constructor(props) {
      super(props)

      this.setWrapperRef = this.setWrapperRef.bind(this)
      this.handleClickOutside = this.handleClickOutside.bind(this)
    }

    componentDidMount() {
      document.addEventListener('mousedown', this.handleClickOutside)
    }

    componentWillUnmount() {
      document.removeEventListener('mousedown', this.handleClickOutside)
    }

    setWrapperRef(node) {
      this.wrapperRef = node
    }

    handleClickOutside(event) {
      if (this.wrapperRef && !this.wrapperRef.contains(event.target)) {
        const { onClickOutside } = this.props
        onClickOutside && onClickOutside()
      }
    }

    render() {
      return (
        <div ref={this.setWrapperRef} style={{ display: 'inline-block' }}>
          <Component {...this.props} />
        </div>
      )
    }
  }

  return Wrapped
}

export default withClickOutside