@pinnacleio/react-event
v1.2.0
Published
Declarative way to handle events outside / inside of React Component.
Downloads
5
Readme
React Event
Declarative way to handle events outside / inside of React Component.
Example
import enhanceWithEvent from '@pinnacleio/react-event'
class HelloWorld extends Component {
handleEvent() { /* Do whatever you want :) */ }
render() { return <div /> }
}
// This component calls `handleEvent` method when `mousedown` is fired anywhere.
const Foo = enhanceWithEvent('mousedown')(HelloWorld)
// This component calls `handleEvent` method when `mousedown` is fired inside it.
const Bar = enhanceWithEvent('mousedown', { inside: true })(HelloWorld)
// This component calls `handleEvent` method when `mousedown` is fired outside of it.
const Baz = enhanceWithEvent('mousedown', { outside: true })(HelloWorld)
API
Our component must define method handleEvent()
in order for enhancer to work, otherwise nothing will happen.
enhanceWithEvent(
events: String | Array<String>,
options: Object,
): HigherOrderComponent
| Parameter | Description | Example | Default Value |
|:-:|:-:|:-:|:-:|
| events | Event type(s) to listen for. | 'mousedown', ['mousedown', 'touchstart']
| Null |
| options | Where event will be accepted. | { outside: true }, { inside: true }
| {} |