Wondering what‚Äôs next for npm?Check out our public roadmap! ¬Ľ

    react-event-listener
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/react-event-listener package

    0.6.6¬†‚Äʬ†Public¬†‚Äʬ†Published

    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

    Install

    npm i react-event-listener

    DownloadsWeekly Downloads

    547,510

    Version

    0.6.6

    License

    MIT

    Unpacked Size

    33.7 kB

    Total Files

    12

    Last publish

    Collaborators

    • avatar