@sohanemon/utils 4.1.12 → 4.1.13

package/dist/functions/index.d.ts

@@ -191,3 +191,12 @@ export declare function throttle<F extends (...args: any[]) => any>(function_: F
  * ```
  */
 export declare function printf(format: string, ...args: unknown[]): string;
+/**
+ * Merges multiple refs into a single ref callback.
+ *
+ * @param refs - An array of refs to merge.
+ *
+ * @returns - A function that updates the merged ref with the provided value.
+ */
+export type MergeRefs = <T>(...refs: Array<React.Ref<T> | undefined>) => React.RefCallback<T>;
+export declare const mergeRefs: MergeRefs;

package/dist/functions/index.js

@@ -347,3 +347,17 @@ export function printf(format, ...args) {
         return arg === undefined ? '' : String(arg);
     });
 }
+export const mergeRefs = (...refs) => {
+    return (value) => {
+        for (const ref of refs) {
+            if (!ref)
+                continue;
+            if (typeof ref === 'function') {
+                ref(value);
+            }
+            else {
+                ref.current = value;
+            }
+        }
+    };
+};

package/dist/hooks/index.d.ts

@@ -142,3 +142,21 @@ export declare const useDomCalculation: ({ blockIds, margin, substract, dynamic,
     height: number;
     width: number;
 };
+/**
+ * Hook to detect if the user is scrolling.
+ * @returns An object containing the isScrolling state and a ref to the scrollable container.
+ */
+export declare const useIsScrolling: () => {
+    isScrolling: boolean;
+    scrollableContainerRef: React.RefObject<HTMLElement>;
+};
+/**
+ * Hook to detect if the user is at the top of the page.
+ * @returns An object containing the isAtTop state and a ref to the scrollable container.
+ */
+export declare const useIsAtTop: ({ offset }?: {
+    offset?: number;
+}) => {
+    scrollableContainerRef: React.RefObject<HTMLElement>;
+    isAtTop: boolean;
+};

package/dist/hooks/index.js

@@ -416,3 +416,62 @@ export const useDomCalculation = ({ blockIds = [], margin = 0, substract = true,
     }, [handleCalculation, dynamic, blockIds.join(',')]);
     return dimensions;
 };
+/**
+ * Hook to detect if the user is scrolling.
+ * @returns An object containing the isScrolling state and a ref to the scrollable container.
+ */
+export const useIsScrolling = () => {
+    const [isScrolling, setIsScrolling] = React.useState(false);
+    const scrollTimerRef = React.useRef(null);
+    const scrollableContainerRef = React.useRef(null);
+    useEffectOnce(() => {
+        const mainElement = scrollableContainerRef.current;
+        if (!mainElement)
+            return;
+        const handleScroll = () => {
+            setIsScrolling(true);
+            if (scrollTimerRef.current) {
+                clearTimeout(scrollTimerRef.current);
+            }
+            // Set a timeout to mark scrolling as finished after delay
+            scrollTimerRef.current = setTimeout(() => {
+                setIsScrolling(false);
+            }, 150);
+        };
+        handleScroll();
+        mainElement.addEventListener('scroll', handleScroll);
+        return () => {
+            mainElement.removeEventListener('scroll', handleScroll);
+            if (scrollTimerRef.current) {
+                clearTimeout(scrollTimerRef.current);
+            }
+        };
+    });
+    return {
+        isScrolling,
+        scrollableContainerRef,
+    };
+};
+/**
+ * Hook to detect if the user is at the top of the page.
+ * @returns An object containing the isAtTop state and a ref to the scrollable container.
+ */
+export const useIsAtTop = ({ offset } = {}) => {
+    const [isAtTop, setIsAtTop] = React.useState(true);
+    const scrollableContainerRef = React.useRef(null);
+    useEffectOnce(() => {
+        const mainElement = scrollableContainerRef.current;
+        if (!mainElement)
+            return;
+        const handleScroll = () => {
+            const scrolled = mainElement.scrollTop > (offset ?? 10);
+            setIsAtTop(!scrolled);
+        };
+        handleScroll();
+        mainElement.addEventListener('scroll', handleScroll);
+        return () => {
+            mainElement.removeEventListener('scroll', handleScroll);
+        };
+    });
+    return { scrollableContainerRef, isAtTop };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sohanemon/utils",
-  "version": "4.1.12",
+  "version": "4.1.13",
   "author": "Sohan Emon <sohanemon@outlook.com>",
   "description": "",
   "type": "module",
@@ -15,30 +15,44 @@
   },
   "typesVersions": {
     "*": {
-      "core": ["dist/index.d.ts"],
-      "types": ["dist/types/index.d.ts"],
-      "hooks": ["dist/hooks/index.d.ts"],
-      "components": ["dist/components/index.d.ts"]
+      "core": [
+        "dist/index.d.ts"
+      ],
+      "types": [
+        "dist/types/index.d.ts"
+      ],
+      "hooks": [
+        "dist/hooks/index.d.ts"
+      ],
+      "components": [
+        "dist/components/index.d.ts"
+      ]
     }
   },
-  "files": ["dist", "README.md"],
+  "files": [
+    "dist",
+    "README.md"
+  ],
   "scripts": {
     "build": "tsc",
     "build:watch": "tsc --watch",
     "export": "tsc && npm publish"
   },
-  "keywords": ["utils", "cn"],
+  "keywords": [
+    "utils",
+    "cn"
+  ],
   "license": "ISC",
   "devDependencies": {
     "@types/node": "^22.4.0",
-    "@types/react": "^18.3.3",
+    "@types/react": "^19.1.4",
     "typescript": "^5.5.4"
   },
   "dependencies": {
     "@fluid-tailwind/tailwind-merge": "^0.0.2",
     "@iconify/react": "^4.1.1",
     "clsx": "^2.1.1",
-    "react": "^18.3.1",
+    "react": "^19.1.0",
     "tailwind-merge": "^1.14.0"
   }
 }