Gathering detailed insights and metrics for react-event-listener
@chakra-ui/react-use-event-listener
A Quick description of the component
@fluentui/react-component-event-listener
React components for binding events on the global scope.
@stardust-ui/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-listenerTypescript
Module System
96.5
Supply Chain
92
Quality
75.5
Maintenance
100
Vulnerability
100
License
JavaScript (100%)
Love this project? Help keep it running — sponsor us today! 🚀
Total Downloads
181,072,263
Last Day
4,965
Last Week
4,965
Last Month
1,038,819
Last Year
19,109,045
357 Stars
157 Commits
39 Forks
6 Watching
1 Branches
15 Contributors
Minified
Minified + Gzipped
Latest Version
0.6.6
Package Id
react-event-listener@0.6.6
Size
8.20 kB
Publised On
02 Feb 2019
Cumulative downloads
Total Downloads
Last day
0%
4,965
Compared to previous day
Last week
-97.7%
4,965
Compared to previous week
Last month
-9.1%
1,038,819
Compared to previous month
Last year
-31.9%
19,109,045
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
82 existing vulnerabilities detected
Details
Score
Last Scanned on 2025-01-27
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