Outside event listener HOC

OutsideEventListener.js

export default function OutsideEventListener(Target, listeners = []) {
    return class OutsideEventListener extends Component {
        target = null

        componentDidMount() {
            for (const eventName of listeners) {
                window.addEventListener(eventName, this.handleEvent, false)
            }
        }

        componentWillUnmount() {
            for (const eventName of listeners) {
                window.removeEventListener(eventName, this.handleEvent, false)
            }
        }

        handleEvent = (event) => {
            if (this.target) {
                const targetElement = ReactDOM.findDOMNode(this.target)
                const isInside = (targetElement === event.target) || targetElement.contains(event.target)

                if (! isInside) {
                    this.target.onOutsideEvent(event)
                }
            }
        }

        storeTarget = (ref) => {
            if (ref && ! ref.onOutsideEvent) {
                throw new Error('Component does not define "onOutsideEvent" method.')
            }

            this.target = ref
        }

        render() {
            return <Target { ...this.props } ref={ this.storeTarget } />
        }
    }
}