react-scroll-control 1.0.1 → 1.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +82 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
# react-scroll-control
|
|
2
|
+
|
|
3
|
+
Control scroll speed in React applications using pure JavaScript — **no third-party libraries required**.
|
|
4
|
+
|
|
5
|
+
`react-scroll-control` provides a simple React hook, `useSmoothScroll()`, that allows you to slow down or speed up mouse-wheel scrolling by intercepting the browser’s native `wheel` event and applying controlled, smooth scrolling behavior.
|
|
6
|
+
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
## 📌 Table of Contents
|
|
10
|
+
|
|
11
|
+
- Introduction
|
|
12
|
+
- Features
|
|
13
|
+
- Installation
|
|
14
|
+
- Usage
|
|
15
|
+
- API Reference
|
|
16
|
+
- Examples
|
|
17
|
+
- Mobile Devices
|
|
18
|
+
- Important Notes
|
|
19
|
+
- How It Works
|
|
20
|
+
- Compatibility
|
|
21
|
+
- License
|
|
22
|
+
- Connect With Us
|
|
23
|
+
|
|
24
|
+
---
|
|
25
|
+
|
|
26
|
+
## 🧠 Introduction
|
|
27
|
+
|
|
28
|
+
Modern browsers do not allow direct control over scroll speed.
|
|
29
|
+
This package solves that limitation by **replacing native wheel scrolling** with a controlled scroll behavior using JavaScript — without any external libraries.
|
|
30
|
+
|
|
31
|
+
---
|
|
32
|
+
|
|
33
|
+
## ✨ Features
|
|
34
|
+
|
|
35
|
+
- Control vertical scroll speed
|
|
36
|
+
- Smooth scrolling behavior
|
|
37
|
+
- No CSS hacks
|
|
38
|
+
- No third-party libraries
|
|
39
|
+
- Lightweight custom React hook
|
|
40
|
+
- Desktop-optimized scrolling
|
|
41
|
+
- Modern ES Module (ESM) support
|
|
42
|
+
|
|
43
|
+
---
|
|
44
|
+
|
|
45
|
+
## 📦 Installation
|
|
46
|
+
|
|
47
|
+
Using npm:
|
|
48
|
+
|
|
49
|
+
```bash
|
|
50
|
+
npm install react-scroll-control
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
## 🚀 Usage
|
|
54
|
+
|
|
55
|
+
```jsx
|
|
56
|
+
import useSmoothScroll from "react-scroll-control";
|
|
57
|
+
|
|
58
|
+
function App() {
|
|
59
|
+
useSmoothScroll(0.5);
|
|
60
|
+
|
|
61
|
+
return (
|
|
62
|
+
<div>
|
|
63
|
+
<h1>Hello JSX</h1>
|
|
64
|
+
</div>
|
|
65
|
+
);
|
|
66
|
+
}
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
|
|
70
|
+
## ⚠️ Important Notes
|
|
71
|
+
|
|
72
|
+
- This hook replaces native mouse-wheel scrolling
|
|
73
|
+
|
|
74
|
+
- Uses { passive: false } to allow preventDefault()
|
|
75
|
+
|
|
76
|
+
- Best used at the root level of the application
|
|
77
|
+
|
|
78
|
+
- Avoid nested scroll containers
|
|
79
|
+
|
|
80
|
+
- Not suitable for touch-based scrolling
|
|
81
|
+
|
|
82
|
+
- Desktop browsers only
|