react-sway 0.1.1 → 0.2.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 CHANGED
@@ -11,14 +11,15 @@ It works by duplicating your content to create a seamless loop and uses CSS tran
11
11
  ### Core Features
12
12
 
13
13
  * **Smooth Infinite Scroll:** Content loops continuously.
14
- * **Auto-Scroll:** Scrolls automatically, with configurable speed.
14
+ * **Auto-Scroll:** Scrolls automatically, with configurable speed and direction.
15
15
  * **User Friendly Interactions:**
16
16
  * Click and drag to scroll.
17
17
  * Swipe on touch devices.
18
- * Mouse wheel support.
18
+ * Mouse wheel support with velocity capping.
19
19
  * Keyboard controls: Spacebar to pause/resume, ArrowUp/ArrowDown to scroll, Home/End to jump.
20
- * **Responsive:** Adjusts to window resizing.
21
- * **Lazy Loading Hook:** Add a `content-item` class to your child elements, and `react-sway` will add a `.visible` class when they enter the viewport. Handy for animations or loading content.
20
+ * **Responsive:** Adjusts to window resizing with debounced recalculation.
21
+ * **Lazy Visibility Detection:** Add a `content-item` class to your child elements, and `react-sway` automatically uses an IntersectionObserver to add a `.visible` class when they enter the viewport. Useful for triggering CSS animations or deferred rendering. Configurable via `lazy`, `lazyRootMargin`, and `lazyThreshold` props.
22
+ * **Reduced Motion Support:** Respects `prefers-reduced-motion: reduce` by lowering auto-scroll speed and disabling momentum effects.
22
23
 
23
24
  ## Installation
24
25
 
@@ -82,6 +83,27 @@ function SwayUsageExample() {
82
83
  export default SwayUsageExample;
83
84
  ```
84
85
 
86
+ ## Props
87
+
88
+ | Prop | Type | Default | Description |
89
+ |------|------|---------|-------------|
90
+ | `autoScroll` | `boolean` | `true` | Enable/disable auto-scrolling. |
91
+ | `children` | `ReactNode` | — | Content elements to render in the scroll container. |
92
+ | `direction` | `'down' \| 'up'` | `'up'` | Auto-scroll direction. |
93
+ | `draggable` | `boolean` | `true` | Enable mouse/touch drag interaction. |
94
+ | `friction` | `number` | `0.95` | Momentum decay coefficient (0–1, lower = more friction). |
95
+ | `keyboard` | `boolean` | `true` | Enable keyboard controls (Space, ArrowUp/Down, Home/End). |
96
+ | `lazy` | `boolean` | `true` | Enable lazy visibility detection via IntersectionObserver. |
97
+ | `lazyRootMargin` | `string` | `'100px'` | IntersectionObserver `rootMargin` for lazy visibility detection. |
98
+ | `lazyThreshold` | `number` | `0.01` | IntersectionObserver `threshold` for lazy visibility detection. |
99
+ | `onPause` | `() => void` | — | Fired when scrolling pauses. |
100
+ | `onResume` | `() => void` | — | Fired when scrolling resumes after pause. |
101
+ | `onScroll` | `(position: number) => void` | — | Fired on every position change with the current scroll position. |
102
+ | `pauseOnInteraction` | `boolean` | `true` | Pause auto-scroll during user interaction. |
103
+ | `resumeDelay` | `number` | `2000` | Milliseconds before auto-scroll resumes after interaction. |
104
+ | `speed` | `number` | `0.5` | Auto-scroll speed in pixels per frame at 60fps. |
105
+ | `wheelEnabled` | `boolean` | `true` | Enable mouse wheel scrolling. |
106
+
85
107
  ## License
86
108
 
87
- This package is licensed under the [MIT License](../../LICENSE).
109
+ This package is licensed under the [MIT License](../../LICENSE).