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.
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>
)
}
}
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!
🌊 ☀️ ☁️ 🌴 🌲 🍄 🌿 🐝 🐻 🐸 🐊