scroll-lock-react 1.0.0 → 1.0.1
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 +67 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
# scroll-lock-react
|
|
2
|
+
|
|
3
|
+
A React component to lock scrolling on a section of your webpage and provide a scroll-based counter to its children.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
- Locks scrolling within a section.
|
|
7
|
+
- Passes a live `counter` prop to child components based on scroll position.
|
|
8
|
+
- Responsive and easy to integrate.
|
|
9
|
+
|
|
10
|
+
## Installation
|
|
11
|
+
|
|
12
|
+
```bash
|
|
13
|
+
npm install scroll-lock-react
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
## Usage
|
|
17
|
+
|
|
18
|
+
```jsx
|
|
19
|
+
import ScrollLock from 'scroll-lock-react';
|
|
20
|
+
|
|
21
|
+
const MyComponent = () => (
|
|
22
|
+
<ScrollLock id="my-section" maxCount={100} duration={30}>
|
|
23
|
+
<MyChildComponent />
|
|
24
|
+
</ScrollLock>
|
|
25
|
+
);
|
|
26
|
+
|
|
27
|
+
// MyChildComponent will receive a `counter` prop
|
|
28
|
+
const MyChildComponent = ({ counter }) => (
|
|
29
|
+
<div>Scroll Counter: {Math.round(counter)}</div>
|
|
30
|
+
);
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
## Props
|
|
34
|
+
|
|
35
|
+
| Prop | Type | Required | Description |
|
|
36
|
+
|-----------|----------|----------|-----------------------------------------------------------------------------|
|
|
37
|
+
| `id` | string | Yes | Unique identifier for the scroll lock section. |
|
|
38
|
+
| `maxCount`| number | Yes | The maximum value the counter can reach as you scroll through the section. |
|
|
39
|
+
| `duration`| number | Yes | Controls the height of the scrollable area (influences scroll sensitivity). |
|
|
40
|
+
| `children`| ReactNode| Yes | Child component(s) to render inside the scroll lock. |
|
|
41
|
+
|
|
42
|
+
## How the `counter` Works
|
|
43
|
+
- As you scroll through the `ScrollLock` section, a `counter` value is calculated based on your scroll position.
|
|
44
|
+
- This `counter` is passed as a prop to each child element of `ScrollLock` **if the child is a valid React element**.
|
|
45
|
+
- The value of `counter` ranges from `0` to `maxCount`.
|
|
46
|
+
- The counter updates in real-time as the user scrolls or touches the section.
|
|
47
|
+
|
|
48
|
+
### Example: Accessing the Counter
|
|
49
|
+
|
|
50
|
+
```jsx
|
|
51
|
+
<ScrollLock id="demo" maxCount={50} duration={20}>
|
|
52
|
+
<MyChildComponent />
|
|
53
|
+
</ScrollLock>
|
|
54
|
+
|
|
55
|
+
const MyChildComponent = ({ counter }) => (
|
|
56
|
+
<div>Current value: {counter}</div>
|
|
57
|
+
);
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
## Styling
|
|
61
|
+
The component includes a default CSS file for layout and sticky positioning. You can override these styles by targeting the following classes:
|
|
62
|
+
- `.lock-scroll`
|
|
63
|
+
- `.counter-view`
|
|
64
|
+
- `.sticky-element`
|
|
65
|
+
|
|
66
|
+
## License
|
|
67
|
+
MIT
|