• This repository has been archived on 11/Jul/2019
  • Stars
    star
    359
  • Rank 118,537 (Top 3 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 9 years ago
  • Updated almost 6 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A React component for binding events on the global scope. 💫

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

More Repositories

1

react-swipeable-views

A React component for swipeable views. ❄️
JavaScript
4,450
star
2

babel-plugin-transform-react-remove-prop-types

Remove unnecessary React propTypes from the production build. 🎈
JavaScript
898
star
3

serviceworker-webpack-plugin

Simplifies creation of a service worker to serve your webpack bundles. ♻️
JavaScript
458
star
4

babel-plugin-react-remove-properties

Babel plugin for removing React properties. 💨
JavaScript
380
star
5

a-journey-toward-better-style

A Journey toward better style
JavaScript
263
star
6

i18n-extract

Manage localization with static analysis. 🔍
JavaScript
170
star
7

SplitMe

Split expenses with friends.
JavaScript
154
star
8

browser-metrics

A collection of metrics tools for measuring performance ⚡️
JavaScript
125
star
9

babel-plugin-transform-dev-warning

Remove development warning from production code
JavaScript
15
star
10

react-benchmark

Environment to benchmark React Component 🏁
JavaScript
14
star
11

react-with-styles-interface-jss

Interface to use react-with-styles with JSS. 🐠
JavaScript
12
star
12

plume

Plume is an accurate indoor tracking system which uses the power of magnetic fields to compute a device's position and orientation. We are aiming at an accuracy of less than a centimeter for the position, and less than a degree for the orientation.
C
9
star
13

material-ui-generate-css-file

CSS
5
star
14

Kinect

Kinect processing
Java
4
star
15

Salonrama

PHP
3
star
16

mui-olivier-tools

TypeScript
3
star
17

mui-merge

test-repo
JavaScript
2
star
18

ELEC222

Architectures reconfigurables et langages HDL
VHDL
2
star
19

ELEC223

Pratique des systèmes à microprocesseurs
C
2
star
20

react-conf-2024-pigment-css

TypeScript
2
star
21

toolpad-issue-2340

https://github.com/mui/mui-toolpad/issues/2340
2
star
22

bug-markdown-release

2
star
23

AirDJ

AirDJ est un logiciel qui permet de mixer de la musique à partir du mouvement des mains, grâce à une kinect.
Java
2
star
24

test-appsmith

1
star
25

appsmith-git-sync

1
star
26

SplitMeBord

Présentation pour le cours de SIM203 - Entrepreneuriat
JavaScript
1
star
27

fooc-nextjs-css-modules

TypeScript
1
star
28

tmp

1
star
29

next-55817

CSS
1
star