React on escape outside with mousedown support

example.js

import EscapeOutside from "react-escape-outside"

class MyComponent extends Component {

  constructor() {
    super()

    this.state = {
      isOpen: false,
    }

    this.handleEscapeOutside = this.handleEscapeOutside.bind(this)
  }

  //… more of your own code, e.g to open your modal

  handleEscapeOutside() {
    this.setState({ isOpen: false })
  }

  render() {
    return (
      <EscapeOutside mouseEvent="mousedown" touchEvent="touchstart" onEscapeOutside={ this.handleEscapeOutside }>
        <div>Some content that will be closed</div>
      </EscapeOutside>
    )
  }
}

index.js

import React, { Component } from "react"
import PropTypes from "prop-types"

export default class EscapeOutside extends Component {
  static propTypes = {
    children: PropTypes.element.isRequired,
    onEscapeOutside: PropTypes.func.isRequired,
    mouseEvent: PropTypes.string,
    touchEvent: PropTypes.string,
  }

  constructor() {
    super()
    this.onEscape = this.onEscape.bind(this)
    this.onClick = this.onClick.bind(this)
    this.getRef = this.getRef.bind(this)
  }

  componentDidMount() {
    document.addEventListener("keydown", this.onEscape)
    document.addEventListener(this.props.mouseEvent, this.onClick, true)
    document.addEventListener(this.props.touchEvent, this.onClick, true)
  }

  componentWillUnmount() {
    document.removeEventListener("keydown", this.onEscape)
    document.removeEventListener(this.props.mouseEvent, this.onClick, true)
    document.removeEventListener(this.props.touchEvent, this.onClick, true)
  }

  onEscape(e) {
    if (e.keyCode === 27) this.props.onEscapeOutside()
  }

  onClick(e) {
    if (!this.ref.contains(e.target)) this.props.onEscapeOutside(e)
  }

  getRef(ref) {
    this.ref = ref
  }

  render() {
    const props = Object.assign({}, this.props)
    const { children } = props

    delete props.onEscapeOutside
    delete props.children

    return (
      <div
        { ...props }
        ref={ this.getRef }
      >
        { children }
      </div>
    )
  }
}

EscapeOutside.defaultProps = {
  mouseEvent: "click",
  touchEvent: "touchend",
};

Based on https://github.com/amytych/react-escape-outside this allows users to specify the click and touch events for escape if they want to use mousedown instead of click or touchstart instead of touchend.

Passing a mouseEvent and/or touchEvent prop like so is how you use:

<EscapeOutside mouseEvent="mousedown" touchEvent="touchstart">

Not passing these props defaults to click and touchend.