A React component for binding events on the global scope.
npm install react-event-listenerThis module provides a declarative way to bind events to a global EventTarget.
It's using the React lifecycle to bind and unbind at the right time.
import React, {Component} from 'react';
import EventListener, {withOptions} from 'react-event-listener';
class MyComponent extends Component {
handleResize = () => {
console.log('resize');
};
handleScroll = () => {
console.log('scroll');
};
handleMouseMove = () => {
console.log('mousemove');
};
render() {
return (
<div>
<EventListener
target="window"
onResize={this.handleResize}
onScroll={withOptions(this.handleScroll, {passive: true, capture: false})}
/>
<EventListener target={document} onMouseMoveCapture={this.handleMouseMove} />
</div>
);
}
}When doing server side rendering, document and window aren't available.
You can use a string as a target, or check that they exist before rendering
the component.
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).
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.
MIT
![greenkeeper[bot] avatar](https://avatars.githubusercontent.com/in/505?v=4 "greenkeeper[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent