Skip to content
This repository has been archived by the owner. It is now read-only.
A React component for binding events on the global scope. 💫
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
test [core] Upgrade Babel 7.0.0-rc.1 (#92) Aug 20, 2018
.babelrc [core] Upgrade Babel 7.0.0-rc.1 (#92) Aug 20, 2018
.eslintignore Bundle code with rollup and track sizes with snapshot (#70) May 20, 2018
.eslintrc.js [core] Upgrade Babel 7.0.0-rc.1 (#92) Aug 20, 2018
.gitignore
.npmignore Bundle code with rollup and track sizes with snapshot (#70) May 20, 2018
.size-limit
.travis.yml feat: make the target property require (#31) Feb 25, 2017
CHANGELOG.md Update CHANGELOG.md Aug 20, 2018
LICENSE chore(*): init for open source project Oct 30, 2015
README.md simplify the readme Sep 22, 2018
package.json v0.6.6 Feb 2, 2019
prettier.config.js [core] Drop IE8 support to save space (#67) Dec 28, 2017
rollup.config.js better have one tool than two, size-limit covers more use cases Sep 22, 2018
yarn.lock [core] Match Material-UI strategy Feb 2, 2019

README.md

react-event-listener

A React component for binding events on the global scope.

npm version npm downloads Build Status

Dependencies DevDependencies

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

You can’t perform that action at this time.