react-event-listener
A React component for binding events on the global scope.
Installation
npm install react-event-listener
The problem solved
This 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.
Usage
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>
);
}
}
Note on server-side rendering
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.
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.
License
MIT