@smakss/react-scroll-direction 4.1.0 → 4.2.0-beta.1

package/Readme.md

@@ -43,6 +43,7 @@ import useDetectScroll, {
 
 The `useDetectScroll` hook takes an options object with the following properties:
 
+- `target`: The target scrollable element from which to detect scroll direction and position (default: `window`, must be an `HTMLDivElement`).
 - `thr`: Threshold for scroll direction change detection (default: `0`, accepts only positive values).
 - `axis`: Defines the scroll axis (`"y"` or `"x"`, default: `"y"`).
 - `scrollUp`: Value returned when scrolling up (y-axis) or left (x-axis) (default: `"up"` for y-axis, `"left"` for x-axis).
@@ -74,6 +75,21 @@ const { scrollDir, scrollPosition } = useDetectScroll({ axis: Axis.X });
 // scrollPosition: { top, bottom, left, right }
 ```
 
+To use a custom scrollable element as a target rather than the default window:
+
+```js
+const customElementRef = useRef<HTMLDivElement>(null);
+const [customElement, setCustomElement] = useState<HTMLDivElement>();
+
+const scrollDir = useDetectScroll({target: customElement});
+
+useEffect(() => {
+    if(customElementRef.current) {
+        setHomepageElement(customElementRef.current);
+    }
+}, [customElementRef])
+```
+
 ## Contributing
 
 Interested in making contributions to this project? Please see [CONTRIBUTING.md](./CONTRIBUTING.md) for guidelines and details.

package/dist/index.d.ts

@@ -1,120 +1,3 @@
-/** Enumeration for axis values */
-export declare enum Axis {
-    /**
-     * The x-axis represents the horizontal direction.
-     */
-    X = "x",
-    /**
-     * The y-axis represents the vertical direction.
-     */
-    Y = "y"
-}
-/** Enumeration for direction values */
-export declare enum Direction {
-    /**
-     * The up direction represents the scroll direction moving towards the top.
-     */
-    Up = "up",
-    /**
-     * The down direction represents the scroll direction moving towards the bottom.
-     */
-    Down = "down",
-    /**
-     * The left direction represents the scroll direction moving towards the left.
-     */
-    Left = "left",
-    /**
-     * The right direction represents the scroll direction moving towards the right.
-     */
-    Right = "right",
-    /**
-     * The still direction represents the scroll direction when the user is not scrolling.
-     */
-    Still = "still"
-}
-type ScrollPosition = {
-    /**
-     * The top position represents the distance from the top edge of the page.
-     */
-    top: number;
-    /**
-     * The bottom position represents the distance from the bottom edge of the page.
-     */
-    bottom: number;
-    /**
-     * The left position represents the distance from the left edge of the page.
-     */
-    left: number;
-    /**
-     * The right position represents the distance from the right edge of the page.
-     */
-    right: number;
-};
-/** Type declaration for the returned scroll information */
-type ScrollInfo = {
-    /**
-     * The scrollDir represents the current scroll direction.
-     */
-    scrollDir: Direction;
-    /**
-     * The scrollPosition represents the current scroll position.
-     */
-    scrollPosition: ScrollPosition;
-};
-/** Type declaration for scroll properties */
-type ScrollProps = {
-    /**
-     * The thr represents the threshold value for scroll detection.
-     */
-    thr?: number;
-    /**
-     * The axis represents the scroll axis (x or y).
-     */
-    axis?: Axis;
-    /**
-     * The scrollUp represents the scroll direction when moving up.
-     */
-    scrollUp?: Direction;
-    /**
-     * The scrollDown represents the scroll direction when moving down.
-     */
-    scrollDown?: Direction;
-    /**
-     * The still represents the scroll direction when the user is not scrolling.
-     */
-    still?: Direction;
-};
-/**
- * useDetectScroll hook.
- *
- * This hook provides a mechanism to detect the scroll direction and position.
- * It will return the scroll direction as a string (up, down, left, right, or still) based on user scrolling,
- * as well as the scroll position from the top, bottom, left, and right edges of the page.
- *
- * @example
- *
- * import useDetectScroll, { Axis, Direction } from '@smakss/react-scroll-direction';
- *
- * function App() {
- *   const { scrollDir, scrollPosition } = useDetectScroll({
- *     thr: 100,
- *     axis: Axis.Y,
- *     scrollUp: Direction.Up,
- *     scrollDown: Direction.Down,
- *     still: Direction.Still
- *   });
- *
- *   return (
- *     <div>
- *       <p>Current scroll direction: {scrollDir}</p>
- *       <p>Scroll position - Top: {scrollPosition.top}, Bottom: {scrollPosition.bottom},
- *          Left: {scrollPosition.left}, Right: {scrollPosition.right}</p>
- *     </div>
- *   );
- * }
- *
- * @param {ScrollProps} props - The properties related to scrolling.
- * @returns {ScrollInfo} - The current direction and position of scrolling.
- */
-declare function useDetectScroll(props?: ScrollProps): ScrollInfo;
+import useDetectScroll from './useDetectScroll';
 export default useDetectScroll;
+export { Axis, Direction } from './types';

package/dist/index.js

@@ -1,6 +1,6 @@
 import { useState, useRef, useCallback, useEffect } from 'react';
 
-/** Enumeration for axis values */
+// Enumeration for axis values
 var Axis;
 (function (Axis) {
     /**
@@ -12,7 +12,7 @@ var Axis;
      */
     Axis["Y"] = "y";
 })(Axis || (Axis = {}));
-/** Enumeration for direction values */
+// Enumeration for direction values
 var Direction;
 (function (Direction) {
     /**
@@ -36,6 +36,7 @@ var Direction;
      */
     Direction["Still"] = "still";
 })(Direction || (Direction = {}));
+
 /**
  * useDetectScroll hook.
  *
@@ -48,7 +49,11 @@ var Direction;
  * import useDetectScroll, { Axis, Direction } from '@smakss/react-scroll-direction';
  *
  * function App() {
+ *   const customElementRef = useRef<HTMLDivElement>(null);
+ *   const [customElement, setCustomElement] = useState<HTMLDivElement>();
+ *
  *   const { scrollDir, scrollPosition } = useDetectScroll({
+ *     target: customElement,
  *     thr: 100,
  *     axis: Axis.Y,
  *     scrollUp: Direction.Up,
@@ -56,6 +61,12 @@ var Direction;
  *     still: Direction.Still
  *   });
  *
+ *   useEffect(() => {
+ *     if (customElementRef.current) {
+ *       setCustomElement(customElementRef.current);
+ *     }
+ *   }, [customElementRef]);
+ *
  *   return (
  *     <div>
  *       <p>Current scroll direction: {scrollDir}</p>
@@ -69,7 +80,7 @@ var Direction;
  * @returns {ScrollInfo} - The current direction and position of scrolling.
  */
 function useDetectScroll(props = {}) {
-    const { thr = 0, axis = Axis.Y, scrollUp = axis === Axis.Y ? Direction.Up : Direction.Left, scrollDown = axis === Axis.Y ? Direction.Down : Direction.Right, still = Direction.Still } = props;
+    const { target = typeof window !== 'undefined' ? window : undefined, thr = 0, axis = Axis.Y, scrollUp = axis === Axis.Y ? Direction.Up : Direction.Left, scrollDown = axis === Axis.Y ? Direction.Down : Direction.Right, still = Direction.Still } = props;
     const [scrollDir, setScrollDir] = useState(still);
     const [scrollPosition, setScrollPosition] = useState({
         top: 0,
@@ -82,41 +93,69 @@ function useDetectScroll(props = {}) {
     const lastScroll = useRef(0);
     /** Function to update scroll direction */
     const updateScrollDir = useCallback(() => {
-        const scroll = axis === Axis.Y ? window.scrollY : window.scrollX;
+        if (!target)
+            return;
+        let scroll;
+        if (target instanceof Window) {
+            scroll = axis === Axis.Y ? target.scrollY : target.scrollX;
+        }
+        else {
+            scroll = axis === Axis.Y ? target.scrollTop : target.scrollLeft;
+        }
         if (Math.abs(scroll - lastScroll.current) >= threshold) {
             setScrollDir(scroll > lastScroll.current ? scrollDown : scrollUp);
             lastScroll.current = Math.max(0, scroll);
         }
         ticking.current = false;
-    }, [axis, threshold, scrollDown, scrollUp]);
+    }, [target, axis, threshold, scrollDown, scrollUp]);
     useEffect(() => {
+        if (!target) {
+            console.warn('useDetectScroll: target is not set. Falling back to window.');
+            return;
+        }
         /** Function to update scroll position */
         const updateScrollPosition = () => {
-            const top = window.scrollY;
-            const left = window.scrollX;
-            const bottom = document.documentElement.scrollHeight - window.innerHeight - top;
-            const right = document.documentElement.scrollWidth - window.innerWidth - left;
+            if (!target)
+                return;
+            const top = target instanceof Window ? target.scrollY : target.scrollTop;
+            const left = target instanceof Window ? target.scrollX : target.scrollLeft;
+            const bottom = (target instanceof Window
+                ? document.documentElement.scrollHeight - target.innerHeight
+                : target.scrollHeight - target.clientHeight) - top;
+            const right = (target instanceof Window
+                ? document.documentElement.scrollWidth - target.innerWidth
+                : target.scrollWidth - target.clientWidth) - left;
             setScrollPosition({ top, bottom, left, right });
         };
-        /** Call the update function when the component mounts */
         updateScrollPosition();
-        window.addEventListener('scroll', updateScrollPosition);
+        const targetElement = target;
+        targetElement.addEventListener('scroll', updateScrollPosition);
         return () => {
-            window.removeEventListener('scroll', updateScrollPosition);
+            targetElement.removeEventListener('scroll', updateScrollPosition);
         };
-    }, []);
+    }, [target]);
     useEffect(() => {
-        lastScroll.current = axis === Axis.Y ? window.scrollY : window.scrollX;
-        /** Function to handle onScroll event */
+        if (!target) {
+            console.warn('useDetectScroll: target is not set. Falling back to window.');
+            return;
+        }
+        if (target instanceof Window) {
+            lastScroll.current = axis === Axis.Y ? target.scrollY : target.scrollX;
+        }
+        else {
+            lastScroll.current =
+                axis === Axis.Y ? target.scrollTop : target.scrollLeft;
+        }
         const onScroll = () => {
             if (!ticking.current) {
                 window.requestAnimationFrame(updateScrollDir);
                 ticking.current = true;
             }
         };
-        window.addEventListener('scroll', onScroll);
-        return () => window.removeEventListener('scroll', onScroll);
-    }, [axis, updateScrollDir]);
+        const targetElement = target;
+        targetElement.addEventListener('scroll', onScroll);
+        return () => targetElement.removeEventListener('scroll', onScroll);
+    }, [target, axis, updateScrollDir]);
     return { scrollDir, scrollPosition };
 }
 

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/index.ts"],"sourcesContent":["import { useState, useEffect, useCallback, useRef } from 'react';\n\n/** Enumeration for axis values */\nexport enum Axis {\n  /**\n   * The x-axis represents the horizontal direction.\n   */\n  X = 'x',\n  /**\n   * The y-axis represents the vertical direction.\n   */\n  Y = 'y'\n}\n\n/** Enumeration for direction values */\nexport enum Direction {\n  /**\n   * The up direction represents the scroll direction moving towards the top.\n   */\n  Up = 'up',\n  /**\n   * The down direction represents the scroll direction moving towards the bottom.\n   */\n  Down = 'down',\n  /**\n   * The left direction represents the scroll direction moving towards the left.\n   */\n  Left = 'left',\n  /**\n   * The right direction represents the scroll direction moving towards the right.\n   */\n  Right = 'right',\n  /**\n   * The still direction represents the scroll direction when the user is not scrolling.\n   */\n  Still = 'still'\n}\n\ntype ScrollPosition = {\n  /**\n   * The top position represents the distance from the top edge of the page.\n   */\n  top: number;\n  /**\n   * The bottom position represents the distance from the bottom edge of the page.\n   */\n  bottom: number;\n  /**\n   * The left position represents the distance from the left edge of the page.\n   */\n  left: number;\n  /**\n   * The right position represents the distance from the right edge of the page.\n   */\n  right: number;\n};\n\n/** Type declaration for the returned scroll information */\ntype ScrollInfo = {\n  /**\n   * The scrollDir represents the current scroll direction.\n   */\n  scrollDir: Direction;\n  /**\n   * The scrollPosition represents the current scroll position.\n   */\n  scrollPosition: ScrollPosition;\n};\n\n/** Type declaration for scroll properties */\ntype ScrollProps = {\n  /**\n   * The thr represents the threshold value for scroll detection.\n   */\n  thr?: number;\n  /**\n   * The axis represents the scroll axis (x or y).\n   */\n  axis?: Axis;\n  /**\n   * The scrollUp represents the scroll direction when moving up.\n   */\n  scrollUp?: Direction;\n  /**\n   * The scrollDown represents the scroll direction when moving down.\n   */\n  scrollDown?: Direction;\n  /**\n   * The still represents the scroll direction when the user is not scrolling.\n   */\n  still?: Direction;\n};\n\n/**\n * useDetectScroll hook.\n *\n * This hook provides a mechanism to detect the scroll direction and position.\n * It will return the scroll direction as a string (up, down, left, right, or still) based on user scrolling,\n * as well as the scroll position from the top, bottom, left, and right edges of the page.\n *\n * @example\n *\n * import useDetectScroll, { Axis, Direction } from '@smakss/react-scroll-direction';\n *\n * function App() {\n *   const { scrollDir, scrollPosition } = useDetectScroll({\n *     thr: 100,\n *     axis: Axis.Y,\n *     scrollUp: Direction.Up,\n *     scrollDown: Direction.Down,\n *     still: Direction.Still\n *   });\n *\n *   return (\n *     <div>\n *       <p>Current scroll direction: {scrollDir}</p>\n *       <p>Scroll position - Top: {scrollPosition.top}, Bottom: {scrollPosition.bottom},\n *          Left: {scrollPosition.left}, Right: {scrollPosition.right}</p>\n *     </div>\n *   );\n * }\n *\n * @param {ScrollProps} props - The properties related to scrolling.\n * @returns {ScrollInfo} - The current direction and position of scrolling.\n */\nfunction useDetectScroll(props: ScrollProps = {}): ScrollInfo {\n  const {\n    thr = 0,\n    axis = Axis.Y,\n    scrollUp = axis === Axis.Y ? Direction.Up : Direction.Left,\n    scrollDown = axis === Axis.Y ? Direction.Down : Direction.Right,\n    still = Direction.Still\n  } = props;\n\n  const [scrollDir, setScrollDir] = useState<Direction>(still);\n  const [scrollPosition, setScrollPosition] = useState<ScrollPosition>({\n    top: 0,\n    bottom: 0,\n    left: 0,\n    right: 0\n  });\n\n  const threshold = Math.max(0, thr);\n  const ticking = useRef(false);\n  const lastScroll = useRef(0);\n\n  /** Function to update scroll direction */\n  const updateScrollDir = useCallback(() => {\n    const scroll = axis === Axis.Y ? window.scrollY : window.scrollX;\n\n    if (Math.abs(scroll - lastScroll.current) >= threshold) {\n      setScrollDir(scroll > lastScroll.current ? scrollDown : scrollUp);\n      lastScroll.current = Math.max(0, scroll);\n    }\n    ticking.current = false;\n  }, [axis, threshold, scrollDown, scrollUp]);\n\n  useEffect(() => {\n    /** Function to update scroll position */\n    const updateScrollPosition = () => {\n      const top = window.scrollY;\n      const left = window.scrollX;\n      const bottom =\n        document.documentElement.scrollHeight - window.innerHeight - top;\n      const right =\n        document.documentElement.scrollWidth - window.innerWidth - left;\n\n      setScrollPosition({ top, bottom, left, right });\n    };\n\n    /** Call the update function when the component mounts */\n    updateScrollPosition();\n\n    window.addEventListener('scroll', updateScrollPosition);\n\n    return () => {\n      window.removeEventListener('scroll', updateScrollPosition);\n    };\n  }, []);\n\n  useEffect(() => {\n    lastScroll.current = axis === Axis.Y ? window.scrollY : window.scrollX;\n\n    /** Function to handle onScroll event */\n    const onScroll = () => {\n      if (!ticking.current) {\n        window.requestAnimationFrame(updateScrollDir);\n        ticking.current = true;\n      }\n    };\n\n    window.addEventListener('scroll', onScroll);\n\n    return () => window.removeEventListener('scroll', onScroll);\n  }, [axis, updateScrollDir]);\n\n  return { scrollDir, scrollPosition };\n}\n\nexport default useDetectScroll;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../src/types.ts","../src/useDetectScroll.ts"],"sourcesContent":["// Enumeration for axis values\nexport enum Axis {\n  /**\n   * The x-axis represents the horizontal direction.\n   */\n  X = 'x',\n  /**\n   * The y-axis represents the vertical direction.\n   */\n  Y = 'y'\n}\n\n// Enumeration for direction values\nexport enum Direction {\n  /**\n   * The up direction represents the scroll direction moving towards the top.\n   */\n  Up = 'up',\n  /**\n   * The down direction represents the scroll direction moving towards the bottom.\n   */\n  Down = 'down',\n  /**\n   * The left direction represents the scroll direction moving towards the left.\n   */\n  Left = 'left',\n  /**\n   * The right direction represents the scroll direction moving towards the right.\n   */\n  Right = 'right',\n  /**\n   * The still direction represents the scroll direction when the user is not scrolling.\n   */\n  Still = 'still'\n}\n\n// Type declaration for scroll position\nexport type ScrollPosition = {\n  /**\n   * The top position represents the distance from the top edge of the page.\n   */\n  top: number;\n  /**\n   * The bottom position represents the distance from the bottom edge of the page.\n   */\n  bottom: number;\n  /**\n   * The left position represents the distance from the left edge of the page.\n   */\n  left: number;\n  /**\n   * The right position represents the distance from the right edge of the page.\n   */\n  right: number;\n};\n\n// Type declaration for the returned scroll information\nexport type ScrollInfo = {\n  /**\n   * The scrollDir represents the current scroll direction.\n   */\n  scrollDir: Direction;\n  /**\n   * The scrollPosition represents the current scroll position.\n   */\n  scrollPosition: ScrollPosition;\n};\n\n// Type declaration for scroll properties\nexport type ScrollProps = {\n  /**\n   * The target represents the scrollable element to check for scroll detection.\n   */\n  target?: HTMLDivElement | Window;\n  /**\n   * The thr represents the threshold value for scroll detection.\n   */\n  thr?: number;\n  /**\n   * The axis represents the scroll axis (x or y).\n   */\n  axis?: Axis;\n  /**\n   * The scrollUp represents the scroll direction when moving up.\n   */\n  scrollUp?: Direction;\n  /**\n   * The scrollDown represents the scroll direction when moving down.\n   */\n  scrollDown?: Direction;\n  /**\n   * The still represents the scroll direction when the user is not scrolling.\n   */\n  still?: Direction;\n};\n","import { useState, useEffect, useCallback, useRef } from 'react';\nimport {\n  Axis,\n  Direction,\n  ScrollInfo,\n  ScrollPosition,\n  ScrollProps\n} from './types';\n\n/**\n * useDetectScroll hook.\n *\n * This hook provides a mechanism to detect the scroll direction and position.\n * It will return the scroll direction as a string (up, down, left, right, or still) based on user scrolling,\n * as well as the scroll position from the top, bottom, left, and right edges of the page.\n *\n * @example\n *\n * import useDetectScroll, { Axis, Direction } from '@smakss/react-scroll-direction';\n *\n * function App() {\n *   const customElementRef = useRef<HTMLDivElement>(null);\n *   const [customElement, setCustomElement] = useState<HTMLDivElement>();\n *\n *   const { scrollDir, scrollPosition } = useDetectScroll({\n *     target: customElement,\n *     thr: 100,\n *     axis: Axis.Y,\n *     scrollUp: Direction.Up,\n *     scrollDown: Direction.Down,\n *     still: Direction.Still\n *   });\n *\n *   useEffect(() => {\n *     if (customElementRef.current) {\n *       setCustomElement(customElementRef.current);\n *     }\n *   }, [customElementRef]);\n *\n *   return (\n *     <div>\n *       <p>Current scroll direction: {scrollDir}</p>\n *       <p>Scroll position - Top: {scrollPosition.top}, Bottom: {scrollPosition.bottom},\n *          Left: {scrollPosition.left}, Right: {scrollPosition.right}</p>\n *     </div>\n *   );\n * }\n *\n * @param {ScrollProps} props - The properties related to scrolling.\n * @returns {ScrollInfo} - The current direction and position of scrolling.\n */\nfunction useDetectScroll(props: ScrollProps = {}): ScrollInfo {\n  const {\n    target = typeof window !== 'undefined' ? window : undefined,\n    thr = 0,\n    axis = Axis.Y,\n    scrollUp = axis === Axis.Y ? Direction.Up : Direction.Left,\n    scrollDown = axis === Axis.Y ? Direction.Down : Direction.Right,\n    still = Direction.Still\n  } = props;\n\n  const [scrollDir, setScrollDir] = useState<Direction>(still);\n  const [scrollPosition, setScrollPosition] = useState<ScrollPosition>({\n    top: 0,\n    bottom: 0,\n    left: 0,\n    right: 0\n  });\n\n  const threshold = Math.max(0, thr);\n  const ticking = useRef(false);\n  const lastScroll = useRef(0);\n\n  /** Function to update scroll direction */\n  const updateScrollDir = useCallback(() => {\n    if (!target) return;\n\n    let scroll: number;\n    if (target instanceof Window) {\n      scroll = axis === Axis.Y ? target.scrollY : target.scrollX;\n    } else {\n      scroll = axis === Axis.Y ? target.scrollTop : target.scrollLeft;\n    }\n\n    if (Math.abs(scroll - lastScroll.current) >= threshold) {\n      setScrollDir(scroll > lastScroll.current ? scrollDown : scrollUp);\n      lastScroll.current = Math.max(0, scroll);\n    }\n    ticking.current = false;\n  }, [target, axis, threshold, scrollDown, scrollUp]);\n\n  useEffect(() => {\n    if (!target) {\n      console.warn(\n        'useDetectScroll: target is not set. Falling back to window.'\n      );\n      return;\n    }\n\n    /** Function to update scroll position */\n    const updateScrollPosition = () => {\n      if (!target) return;\n\n      const top = target instanceof Window ? target.scrollY : target.scrollTop;\n      const left =\n        target instanceof Window ? target.scrollX : target.scrollLeft;\n\n      const bottom =\n        (target instanceof Window\n          ? document.documentElement.scrollHeight - target.innerHeight\n          : target.scrollHeight - target.clientHeight) - top;\n      const right =\n        (target instanceof Window\n          ? document.documentElement.scrollWidth - target.innerWidth\n          : target.scrollWidth - target.clientWidth) - left;\n\n      setScrollPosition({ top, bottom, left, right });\n    };\n\n    updateScrollPosition();\n\n    const targetElement = target as EventTarget;\n    targetElement.addEventListener('scroll', updateScrollPosition);\n\n    return () => {\n      targetElement.removeEventListener('scroll', updateScrollPosition);\n    };\n  }, [target]);\n\n  useEffect(() => {\n    if (!target) {\n      console.warn(\n        'useDetectScroll: target is not set. Falling back to window.'\n      );\n      return;\n    }\n\n    if (target instanceof Window) {\n      lastScroll.current = axis === Axis.Y ? target.scrollY : target.scrollX;\n    } else {\n      lastScroll.current =\n        axis === Axis.Y ? target.scrollTop : target.scrollLeft;\n    }\n\n    const onScroll = () => {\n      if (!ticking.current) {\n        window.requestAnimationFrame(updateScrollDir);\n        ticking.current = true;\n      }\n    };\n\n    const targetElement = target as EventTarget;\n    targetElement.addEventListener('scroll', onScroll);\n\n    return () => targetElement.removeEventListener('scroll', onScroll);\n  }, [target, axis, updateScrollDir]);\n\n  return { scrollDir, scrollPosition };\n}\n\nexport default useDetectScroll;\n"],"names":[],"mappings":"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"}

package/dist/types.d.ts

@@ -0,0 +1,86 @@
+export declare enum Axis {
+    /**
+     * The x-axis represents the horizontal direction.
+     */
+    X = "x",
+    /**
+     * The y-axis represents the vertical direction.
+     */
+    Y = "y"
+}
+export declare enum Direction {
+    /**
+     * The up direction represents the scroll direction moving towards the top.
+     */
+    Up = "up",
+    /**
+     * The down direction represents the scroll direction moving towards the bottom.
+     */
+    Down = "down",
+    /**
+     * The left direction represents the scroll direction moving towards the left.
+     */
+    Left = "left",
+    /**
+     * The right direction represents the scroll direction moving towards the right.
+     */
+    Right = "right",
+    /**
+     * The still direction represents the scroll direction when the user is not scrolling.
+     */
+    Still = "still"
+}
+export type ScrollPosition = {
+    /**
+     * The top position represents the distance from the top edge of the page.
+     */
+    top: number;
+    /**
+     * The bottom position represents the distance from the bottom edge of the page.
+     */
+    bottom: number;
+    /**
+     * The left position represents the distance from the left edge of the page.
+     */
+    left: number;
+    /**
+     * The right position represents the distance from the right edge of the page.
+     */
+    right: number;
+};
+export type ScrollInfo = {
+    /**
+     * The scrollDir represents the current scroll direction.
+     */
+    scrollDir: Direction;
+    /**
+     * The scrollPosition represents the current scroll position.
+     */
+    scrollPosition: ScrollPosition;
+};
+export type ScrollProps = {
+    /**
+     * The target represents the scrollable element to check for scroll detection.
+     */
+    target?: HTMLDivElement | Window;
+    /**
+     * The thr represents the threshold value for scroll detection.
+     */
+    thr?: number;
+    /**
+     * The axis represents the scroll axis (x or y).
+     */
+    axis?: Axis;
+    /**
+     * The scrollUp represents the scroll direction when moving up.
+     */
+    scrollUp?: Direction;
+    /**
+     * The scrollDown represents the scroll direction when moving down.
+     */
+    scrollDown?: Direction;
+    /**
+     * The still represents the scroll direction when the user is not scrolling.
+     */
+    still?: Direction;
+};

package/dist/useDetectScroll.d.ts

@@ -0,0 +1,45 @@
+import { ScrollInfo, ScrollProps } from './types';
+/**
+ * useDetectScroll hook.
+ *
+ * This hook provides a mechanism to detect the scroll direction and position.
+ * It will return the scroll direction as a string (up, down, left, right, or still) based on user scrolling,
+ * as well as the scroll position from the top, bottom, left, and right edges of the page.
+ *
+ * @example
+ *
+ * import useDetectScroll, { Axis, Direction } from '@smakss/react-scroll-direction';
+ *
+ * function App() {
+ *   const customElementRef = useRef<HTMLDivElement>(null);
+ *   const [customElement, setCustomElement] = useState<HTMLDivElement>();
+ *
+ *   const { scrollDir, scrollPosition } = useDetectScroll({
+ *     target: customElement,
+ *     thr: 100,
+ *     axis: Axis.Y,
+ *     scrollUp: Direction.Up,
+ *     scrollDown: Direction.Down,
+ *     still: Direction.Still
+ *   });
+ *
+ *   useEffect(() => {
+ *     if (customElementRef.current) {
+ *       setCustomElement(customElementRef.current);
+ *     }
+ *   }, [customElementRef]);
+ *
+ *   return (
+ *     <div>
+ *       <p>Current scroll direction: {scrollDir}</p>
+ *       <p>Scroll position - Top: {scrollPosition.top}, Bottom: {scrollPosition.bottom},
+ *          Left: {scrollPosition.left}, Right: {scrollPosition.right}</p>
+ *     </div>
+ *   );
+ * }
+ *
+ * @param {ScrollProps} props - The properties related to scrolling.
+ * @returns {ScrollInfo} - The current direction and position of scrolling.
+ */
+declare function useDetectScroll(props?: ScrollProps): ScrollInfo;
+export default useDetectScroll;

package/package.json

@@ -80,5 +80,5 @@
   },
   "type": "module",
   "types": "./dist/index.d.ts",
-  "version": "4.1.0"
+  "version": "4.2.0-beta.1"
 }