React event listener

A React component for binding events on the global scope.

Getting Started

npm install react-event-listener

Usage

import React, {Component} from 'react';
import EventListener from 'react-event-listener';

class MyComponent extends Component {
  handleResize = () => {
    console.log('resize');
  };

  handleMouseMove = () => {
    console.log('mousemove');
  };

  render() {
    return (
      <div>
        <EventListener target={window} onResize={this.handleResize} />
        <EventListener target={document} onMouseMove={this.handleMouseMove} capture={true} />
      </div>
    );
  }
}

Note on Performance

You should avoid passing inline functions for listeners, because this creates a new Function instance on every render, defeating EventListener's shouldComponentUpdate, and triggering an update cycle where it removes its old listeners and adds its new listeners (so that it can stay up-to-date with the props you passed in).

Note on Testing

In this issue from React, TestUtils.Simulate. methods won't bubble up to window or document. As a result, you must use document.dispatchEvent or simulate event using native DOM api.

See our test cases for more information.

Contributing

Note: you need to have Flow 0.23.0 or greater to be installed.

1. Fork it
2. Create your feature branch (git checkout -b my-new-feature)
3. Commit your changes (git commit -am 'Add some feature')
4. Push to the branch (git push origin my-new-feature)
5. Create new Pull Request

Collaborators

• Andy Edwards (jedwards1211)

License

MIT