Close React component by pressing Escape or clicking outside of it

React Escape Outside

Higher Order Component to close wrapped component by pressing ESC key or clicking outside. Combines two separate funcionalities I often find useful together.

Usage

npm i react-escape-outside --save

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 onEscapeOutside={ this.handleEscapeOutside }>
        <div>Some content that will be closed</div>
      </EscapeOutside>
    )
  }
}

Specify mouse and touch event

Mouse and touch handlers are attached to click and touchend events but you can override these defaults with mouseEvent and touchEvent props.

Make sure to escape outside from time to time!

GitHub