@koine/react 1.1.3 → 1.1.4

package/hooks/index.d.ts

@@ -14,6 +14,7 @@ export * from "./useNavigateAway";
 export * from "./usePrevious";
 export * from "./usePreviousRef";
 export * from "./useScrollPosition";
+export * from "./useScrollThreshold";
 export * from "./useSmoothScroll";
 export * from "./useTraceUpdate";
 export * from "./useUpdateEffect";

package/hooks/index.js

@@ -14,6 +14,7 @@ export * from "./useNavigateAway";
 export * from "./usePrevious";
 export * from "./usePreviousRef";
 export * from "./useScrollPosition";
+export * from "./useScrollThreshold";
 // export * from "./useScrollTo";
 export * from "./useSmoothScroll";
 export * from "./useTraceUpdate";

package/hooks/useScrollThreshold.d.ts

@@ -0,0 +1,2 @@
+export declare const useScrollThreshold: (threshold?: number, callback?: ((isAbove: boolean, isBelow: boolean) => void) | undefined) => boolean;
+export default useScrollThreshold;

package/hooks/useScrollThreshold.js

@@ -0,0 +1,28 @@
+import { useCallback, useEffect, useState } from "react";
+import { noop } from "@koine/utils";
+import { /* listenScroll, */ on } from "@koine/dom";
+export var useScrollThreshold = function (threshold, callback) {
+    var _a = useState(false), isBelow = _a[0], setIsBelow = _a[1];
+    var handler = useCallback(function () {
+        if (threshold) {
+            var posY = window.scrollY; // * -1;
+            var isAbove = posY < threshold;
+            var isBelow_1 = posY > threshold;
+            // console.log("useScrollThreshold setIsBelow", isBelow, posY, threshold);
+            setIsBelow(isBelow_1);
+            if (callback)
+                callback(isAbove, isBelow_1);
+        }
+    }, [threshold, callback]);
+    useEffect(function () {
+        if (threshold) {
+            // const listener = listenScroll(handler, 50);
+            var listener = on(window, "scroll", handler, { passive: true });
+            handler();
+            return listener;
+        }
+        return noop;
+    }, [threshold, handler]);
+    return isBelow;
+};
+export default useScrollThreshold;

package/node/hooks/index.js

@@ -17,6 +17,7 @@ tslib_1.__exportStar(require("./useNavigateAway"), exports);
 tslib_1.__exportStar(require("./usePrevious"), exports);
 tslib_1.__exportStar(require("./usePreviousRef"), exports);
 tslib_1.__exportStar(require("./useScrollPosition"), exports);
+tslib_1.__exportStar(require("./useScrollThreshold"), exports);
 // export * from "./useScrollTo";
 tslib_1.__exportStar(require("./useSmoothScroll"), exports);
 tslib_1.__exportStar(require("./useTraceUpdate"), exports);

package/node/hooks/useScrollThreshold.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useScrollThreshold = void 0;
+var react_1 = require("react");
+var utils_1 = require("@koine/utils");
+var dom_1 = require("@koine/dom");
+var useScrollThreshold = function (threshold, callback) {
+    var _a = (0, react_1.useState)(false), isBelow = _a[0], setIsBelow = _a[1];
+    var handler = (0, react_1.useCallback)(function () {
+        if (threshold) {
+            var posY = window.scrollY; // * -1;
+            var isAbove = posY < threshold;
+            var isBelow_1 = posY > threshold;
+            // console.log("useScrollThreshold setIsBelow", isBelow, posY, threshold);
+            setIsBelow(isBelow_1);
+            if (callback)
+                callback(isAbove, isBelow_1);
+        }
+    }, [threshold, callback]);
+    (0, react_1.useEffect)(function () {
+        if (threshold) {
+            // const listener = listenScroll(handler, 50);
+            var listener = (0, dom_1.on)(window, "scroll", handler, { passive: true });
+            handler();
+            return listener;
+        }
+        return utils_1.noop;
+    }, [threshold, handler]);
+    return isBelow;
+};
+exports.useScrollThreshold = useScrollThreshold;
+exports.default = exports.useScrollThreshold;

package/package.json

@@ -44,6 +44,6 @@
   },
   "main": "./node/index.js",
   "types": "./index.d.ts",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "module": "./index.js"
 }