Gathering detailed insights and metrics for react-event-listener
Gathering detailed insights and metrics for react-event-listener
Gathering detailed insights and metrics for react-event-listener
Gathering detailed insights and metrics for react-event-listener
@chakra-ui/react-use-event-listener
A Quick description of the component
@stardust-ui/react-component-event-listener
React components for binding events on the global scope.
@fluentui/react-component-event-listener
React components for binding events on the global scope.
@use-it/event-listener
A custom React Hook that provides a useEventListener.
A React component for binding events on the global scope. 💫
npm install react-event-listener
Typescript
Module System
96.3
Supply Chain
92.5
Quality
75.5
Maintenance
100
Vulnerability
100
License
JavaScript (100%)
Total Downloads
187,221,089
Last Day
13,295
Last Week
343,549
Last Month
1,464,159
Last Year
18,363,513
MIT License
356 Stars
157 Commits
36 Forks
6 Watchers
1 Branches
15 Contributors
Updated on May 07, 2025
Minified
Minified + Gzipped
Latest Version
0.6.6
Package Id
react-event-listener@0.6.6
Size
8.20 kB
Published on
Feb 02, 2019
Cumulative downloads
Total Downloads
Last Day
2.9%
13,295
Compared to previous day
Last Week
-4.7%
343,549
Compared to previous week
Last Month
0.8%
1,464,159
Compared to previous month
Last Year
-26.6%
18,363,513
Compared to previous year
3
1
37
A React component for binding events on the global scope.
1npm install react-event-listener
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.
1import React, {Component} from 'react'; 2import EventListener, {withOptions} from 'react-event-listener'; 3 4class MyComponent extends Component { 5 handleResize = () => { 6 console.log('resize'); 7 }; 8 9 handleScroll = () => { 10 console.log('scroll'); 11 }; 12 13 handleMouseMove = () => { 14 console.log('mousemove'); 15 }; 16 17 render() { 18 return ( 19 <div> 20 <EventListener 21 target="window" 22 onResize={this.handleResize} 23 onScroll={withOptions(this.handleScroll, {passive: true, capture: false})} 24 /> 25 <EventListener target={document} onMouseMoveCapture={this.handleMouseMove} /> 26 </div> 27 ); 28 } 29}
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.
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).
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.
MIT
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
Reason
Found 4/30 approved changesets -- score normalized to 1
Reason
project is archived
Details
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
Reason
project is not fuzzed
Details
Reason
branch protection not enabled on development/release branches
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Reason
87 existing vulnerabilities detected
Details
Score
Last Scanned on 2025-06-30
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More