react-event-outside
v1.3.2
Published
A Higher Order Component for listening mouse events outside of the component
Downloads
108
Readme
ReactEventOutside
A Higher Order Component for listening mouse events outside of the component
It's uses callback refs instead of ReactDOM.findDOMNode()
(why).
Usage
Installation
npm install react-event-outside --save
Basic usage:
ReactEventOutside()(Component) /* listening for default "click" event */
ReactEventOutside(['wheel', 'dblclick'])(Component) /* listening for "wheel" and "dblclick" events */
Using ES6:
import React from 'react';
import ReactEventOutside from 'react-event-outside';
class ShareArea extends React.Component {
constructor(props) {
super(props);
this.handleEvent = this.handleEvent.bind(this);
}
handleEvent(e) {
/* your code */
}
render() {
return <div>Nothing here...</div>
);
}
}
export default ReactEventOutside()(ShareArea);
Using ES7 decorator:
import React from 'react';
import ReactEventOutside from 'react-event-outside';
@ReactEventOutside()
class ShareArea extends React.Component {
constructor(props) {
super(props);
this.handleEvent = this.handleEvent.bind(this);
}
handleEvent(e) {
/* your code */
}
render() {
return <div>Nothing here...</div>
);
}
}
export default ShareArea;
Notes
- If
handleEvent
isn't implemented, nothing would happen.
License
MIT