Gathering detailed insights and metrics for react-scroll-wheel-handler
Installations
npm install react-scroll-wheel-handlerDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS
Node Version
18.2.0
NPM Version
8.9.0
Releases
Unable to fetch releases
Contributors
6
Unable to fetch Contributors
Languages
2
JavaScript
HTML
JavaScript (98.72%)
HTML (1.28%)
Love this project? Help keep it running — sponsor us today! 🚀
Developer
Etto91
Download Statistics
Total Downloads
626,606
Last Day
779
Last Week
2,928
Last Month
13,621
Last Year
164,575
GitHub Statistics
59 Stars
78 Commits
13 Forks
1 Watching
13 Branches
6 Contributors
Maintainers
1
Package Meta Information
Latest Version
2.2.0
Package Id
react-scroll-wheel-handler@2.2.0
Unpacked Size
17.41 kB
Size
6.58 kB
File Count
6
NPM Version
8.9.0
Node Version
18.2.0
Total Downloads
Cumulative downloads
Total Downloads
626,606
Last day
6.7%
779
Compared to previous day
Last week
-18.3%
2,928
Compared to previous week
Last month
39.7%
13,621
Compared to previous month
Last year
-19.1%
164,575
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dev Dependencies
28
@babel/core@babel/preset-env@babel/preset-reactbabel-eslintbabel-jestbabel-loaderbabel-plugin-module-resolverbabel-plugin-transform-class-propertiesbabel-plugin-transform-object-assignbabel-preset-airbnbcopy-webpack-pluginenzymeenzyme-adapter-react-16eslinteslint-config-airbnbeslint-plugin-importeslint-plugin-jsx-a11yeslint-plugin-reactexports-loaderjestlethargyreactreact-domreact-test-rendererstyled-componentswebpackwebpack-cliwebpack-node-externals
Versions
React Scroll Wheel Handler
Simple react component for handling scroll trackpad, arrow keys, swipe gestures and mouse wheel event.
Demo
#Update
- 2.0.0:
add prop disableSwipe.
removed customStyle from props.
Replace CustomContainerComponent with CustomComponent. It must have ref passed as a prop. Example:
1const CustomComponent = forwardRef(({ children, ...props }, ref) => ( 2 <div ref={ref} {...props} id="custom"> 3 {children} 4 </div> 5));
- 1.0.0: change function to check when mouse/trackpad value increase (fix windows scroll)
Usage
- Install the npm package:
1 npm install --save react-scroll-wheel-handler 2 or 3 yarn add react-scroll-wheel-handler
- Import it:
1import ReactScrollWheelHandler from "react-scroll-wheel-handler";
- Config the component:
1<ReactScrollWheelHandler 2 upHandler={(e) => console.log("scroll up")} 3 downHandler={(e) => console.log("scroll down")} 4> 5 ... 6</ReactScrollWheelHandler>
#Props
- upHandler: Function that is triggered on scroll up
- downHandler: Function that is triggered on scroll down
- leftHandler: Function that is triggered on scroll left
- rightHandler: Function that is triggered on scroll right
- CustomComponent: Component with forwardRef. It will be rendered in place of the container div.
- pauseListeners: Boolean. isRequired. Default: false. With this props you can block all events from be fired
- timeout: Integer. isRequired. Default: 600. Timeout between scroll.
- disableKeyboard: Boolean. Default: false.
- disableSwipe: Boolean. Default: false.
- disableSwipeWithMouse: Boolean. Default: false.
- preventScroll: Boolean. isRequired. Prevent scroll, if you want to implement your own scrolling. Default: false.
- wheelConfig: Array. Default: []. Set config for Lethargy lib. Example: [7, 100, 0.05]. stability, sensitivity, tolerance.
All the other props are passed to the div/component returned.
Example
1import React, { Component } from "react"; 2import ReactScrollWheelHandler from " react-scroll-wheel-handler"; 3 4class App extends React.Component { 5 state = { 6 currentIndex: 0, 7 colors: ["red", "black", "grey", "blue", "green"], 8 }; 9 nextIndex = () => { 10 const { colors, currentIndex } = this.state; 11 if (currentIndex == colors.length - 1) { 12 return this.setState({ currentIndex: 0 }); 13 } 14 15 return this.setState({ 16 currentIndex: currentIndex + 1, 17 }); 18 }; 19 20 prevIndex = () => { 21 const { colors, currentIndex } = this.state; 22 if (currentIndex == 0) { 23 return this.setState({ 24 currentIndex: colors.length - 1, 25 }); 26 } 27 28 return this.setState({ 29 currentIndex: currentIndex - 1, 30 }); 31 }; 32 33 render() { 34 const { colors, currentIndex } = this.state; 35 return ( 36 <div> 37 <ReactScrollWheelHandler 38 upHandler={this.prevIndex} 39 downHandler={this.nextIndex} 40 style={{ 41 width: "100%", 42 height: "100vh", 43 backgroundColor: colors[currentIndex], 44 transition: "background-color .4s ease-out", 45 }} 46 > 47 <h1>SCROLL FOR CHANGE BACKGROUND COLOR</h1> 48 </ReactScrollWheelHandler> 49 </div> 50 ); 51 } 52}
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
no dangerous workflow patterns detected
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
Found 4/21 approved changesets -- score normalized to 1
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Warn: no topLevel permission defined: .github/workflows/test.yml:1
- Info: no jobLevel write permissions found
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/Etto91/react-scroll-wheel-handler/test.yml/master?enable=pin
- Warn: npmCommand not pinned by hash: .github/workflows/test.yml:18
- Info: 0 out of 1 GitHub-owned GitHubAction dependencies pinned
- Info: 0 out of 1 npmCommand dependencies pinned
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 13 are checked with a SAST tool
Reason
25 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
- Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
- Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
- Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
- Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
- Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
- Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
- Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
- Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
- Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
- Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
- Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
- Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
- Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
Score
2.6
/10
Last Scanned on 2025-02-03
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