react-escape-outside

0.1.2 • Public • Published

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. See a demo.

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!

🌊 ☀️ ☁️ 🌴 🌲 🍄 🌿 🐝 🐻 🐸 🐊

Package Sidebar

Install

npm i react-escape-outside

Weekly Downloads

354

Version

0.1.2

License

MIT

Unpacked Size

12.8 kB

Total Files

8

Last publish

Collaborators

  • amytych