react-event-outside

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