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" { thisstate = isOpen: false thishandleEscapeOutside = thishandleEscapeOutside } //… more of your own code, e.g to open your modal { this } { return <EscapeOutside => <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!
🌊 ☀️ ☁️ 🌴 🌲 🍄 🌿 🐝 🐻 🐸 🐊