use-carousel-hook - npm Package Compare versions

Comparing version 0.0.8 to 0.0.9

CHANGELOG.md

 # Changelog
 
+## [0.0.9]
+
+- Update current and inView values on scroll.
+
 ## [0.0.8]
@@ -4,0 +8,0 @@

cjs/useCarousel.js

@@ -51,8 +51,22 @@ "use strict";
     };
+    const updateCurrentOnScroll = () => {
+        const carouselEl = ref.current;
+        for (let index = 0; index < carouselEl.children.length; index++) {
+            const child = carouselEl.children[index];
+            if (child.offsetLeft >= carouselEl.scrollLeft) {
+                if (index !== current) {
+                    setCurrent(index);
+                }
+                break;
+            }
+        }
+    };
     react_1.useEffect(() => {
         window.addEventListener('resize', updateMaxIndex);
         window.addEventListener('resize', updateInView);
+        ref.current.addEventListener('scroll', updateCurrentOnScroll);
         return () => {
             window.removeEventListener('resize', updateMaxIndex);
             window.removeEventListener('resize', updateInView);
+            ref.current.removeEventListener('scroll', updateCurrentOnScroll);
         };
@@ -59,0 +73,0 @@ }, []);

dist/useCarousel.js

@@ -46,8 +46,22 @@ import { useState, useRef, useEffect, useReducer, useCallback } from 'react';
     };
+    const updateCurrentOnScroll = () => {
+        const carouselEl = ref.current;
+        for (let index = 0; index < carouselEl.children.length; index++) {
+            const child = carouselEl.children[index];
+            if (child.offsetLeft >= carouselEl.scrollLeft) {
+                if (index !== current) {
+                    setCurrent(index);
+                }
+                break;
+            }
+        }
+    };
     useEffect(() => {
         window.addEventListener('resize', updateMaxIndex);
         window.addEventListener('resize', updateInView);
+        ref.current.addEventListener('scroll', updateCurrentOnScroll);
         return () => {
             window.removeEventListener('resize', updateMaxIndex);
             window.removeEventListener('resize', updateInView);
+            ref.current.removeEventListener('scroll', updateCurrentOnScroll);
         };
@@ -54,0 +68,0 @@ }, []);

package.json

 {
     "name": "use-carousel-hook",
-    "version": "0.0.8",
+    "version": "0.0.9",
     "description": "Adds functionality for carousels using React hooks",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

21572

increased by6.08%

Lines of code

394

increased by7.65%

No dependency changes