react-event-listener
    Overview
    Documentation
    Tutorials
    Chat
    Insights
    Code
    Dependencies
    Contributors
    Jobs

react-event-listener

A React component that allow to bind events on the global scope

0.6.6  •  Updated 1 years ago  •  by Olivier Tassinari  •  MIT License

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

Popularity

Maintenance

Development

Last ver 1 year ago
Created 5 years ago
Last commit 1 year ago
9 days between commits

Technology

Node version: null
33.7K unpacked

Compliance

MIT License
OSI Approved
0 vulnerabilities

Contributors

17 contributors
Olivier Tassinari
Maintainer, 108 commits, 51 merges, 14 PRs
Works at Material-UI
greenkeeper[bot]
15 commits
Jaroslav Kubicek
12 commits
Bogdan Chadkin
6 commits, 9 PRs
Works at realadvisor
Tom Chen
4 commits, 1 PRs
Works at N/A
Andy Edwards
2 commits, 2 PRs
Works at jcoreio

Tags

react
event
listener
binding
Openbase helps developers choose among and use millions of open-source packages, so they can build amazing products faster.
FacebookTwitterLinkedIn
© 2020 Devstore, Inc.