@smakss/react-scroll-direction 4.0.4 → 4.2.0-beta.0

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,35 +1,4 @@
-/** Enumeration for axis values */
-export declare enum Axis {
-    X = "x",
-    Y = "y"
-}
-/** Enumeration for direction values */
-export declare enum Direction {
-    Up = "up",
-    Down = "down",
-    Left = "left",
-    Right = "right",
-    Still = "still"
-}
-type ScrollPosition = {
-    top: number;
-    bottom: number;
-    left: number;
-    right: number;
-};
-/** Type declaration for the returned scroll information */
-type ScrollInfo = {
-    scrollDir: Direction;
-    scrollPosition: ScrollPosition;
-};
-/** Type declaration for scroll properties */
-type ScrollProps = {
-    thr?: number;
-    axis?: Axis;
-    scrollUp?: Direction;
-    scrollDown?: Direction;
-    still?: Direction;
-};
+import { Axis, Direction, ScrollInfo, ScrollProps } from './types';
 /**
  * useDetectScroll hook.
  *
@@ -42,7 +11,11 @@ type ScrollProps = {
  * 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,
@@ -50,6 +23,12 @@ type ScrollProps = {
  *     still: Direction.Still
  *   });
  *
+ *   useEffect(() => {
+ *     if (customElementRef.current) {
+ *       setCustomElement(customElementRef.current);
+ *     }
+ *   }, [customElementRef]);
+ *
  *   return (
  *     <div>
  *       <p>Current scroll direction: {scrollDir}</p>
@@ -63,4 +42,5 @@ type ScrollProps = {
  * @returns {ScrollInfo} - The current direction and position of scrolling.
  */
 declare function useDetectScroll(props?: ScrollProps): ScrollInfo;
+export { Axis, Direction };
 export default useDetectScroll;

package/dist/index.js

@@ -1,20 +1,42 @@
-import { useState, useCallback, useEffect } from 'react';
+import { useState, useRef, useCallback, useEffect } from 'react';
 
 /** Enumeration for axis values */
 var Axis;
 (function (Axis) {
+    /**
+     * The x-axis represents the horizontal direction.
+     */
     Axis["X"] = "x";
+    /**
+     * The y-axis represents the vertical direction.
+     */
     Axis["Y"] = "y";
 })(Axis || (Axis = {}));
 /** Enumeration for direction values */
 var Direction;
 (function (Direction) {
+    /**
+     * The up direction represents the scroll direction moving towards the top.
+     */
     Direction["Up"] = "up";
+    /**
+     * The down direction represents the scroll direction moving towards the bottom.
+     */
     Direction["Down"] = "down";
+    /**
+     * The left direction represents the scroll direction moving towards the left.
+     */
     Direction["Left"] = "left";
+    /**
+     * The right direction represents the scroll direction moving towards the right.
+     */
     Direction["Right"] = "right";
+    /**
+     * The still direction represents the scroll direction when the user is not scrolling.
+     */
     Direction["Still"] = "still";
 })(Direction || (Direction = {}));
+
 /**
  * useDetectScroll hook.
  *
@@ -27,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,
@@ -35,6 +61,12 @@ var Direction;
  *     still: Direction.Still
  *   });
  *
+ *   useEffect(() => {
+ *     if (customElementRef.current) {
+ *       setCustomElement(customElementRef.current);
+ *     }
+ *   }, [customElementRef]);
+ *
  *   return (
  *     <div>
  *       <p>Current scroll direction: {scrollDir}</p>
@@ -48,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,
@@ -57,45 +89,73 @@ function useDetectScroll(props = {}) {
         right: 0
     });
     const threshold = Math.max(0, thr);
-    let ticking = false;
-    let lastScroll = 0;
+    const ticking = useRef(false);
+    const lastScroll = useRef(0);
     /** Function to update scroll direction */
     const updateScrollDir = useCallback(() => {
-        const scroll = axis === Axis.Y ? window.scrollY : window.scrollX;
-        if (Math.abs(scroll - lastScroll) >= threshold) {
-            setScrollDir(scroll > lastScroll ? scrollDown : scrollUp);
-            lastScroll = Math.max(0, scroll);
+        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 = false;
-    }, [axis, threshold, scrollDown, scrollUp]);
+        ticking.current = false;
+    }, [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 = 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) {
+            if (!ticking.current) {
                 window.requestAnimationFrame(updateScrollDir);
-                ticking = true;
+                ticking.current = true;
             }
         };
-        window.addEventListener('scroll', onScroll);
-        return () => window.removeEventListener('scroll', onScroll);
-    }, [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 } from 'react';\n\n/** Enumeration for axis values */\nexport enum Axis {\n  X = 'x',\n  Y = 'y'\n}\n\n/** Enumeration for direction values */\nexport enum Direction {\n  Up = 'up',\n  Down = 'down',\n  Left = 'left',\n  Right = 'right',\n  Still = 'still'\n}\n\ntype ScrollPosition = {\n  top: number;\n  bottom: number;\n  left: number;\n  right: number;\n};\n\n/** Type declaration for the returned scroll information */\ntype ScrollInfo = {\n  scrollDir: Direction;\n  scrollPosition: ScrollPosition;\n};\n\n/** Type declaration for scroll properties */\ntype ScrollProps = {\n  thr?: number;\n  axis?: Axis;\n  scrollUp?: Direction;\n  scrollDown?: Direction;\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  let ticking = false;\n  let lastScroll = 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) >= threshold) {\n      setScrollDir(scroll > lastScroll ? scrollDown : scrollUp);\n      lastScroll = Math.max(0, scroll);\n    }\n    ticking = 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 = axis === Axis.Y ? window.scrollY : window.scrollX;\n\n    /** Function to handle onScroll event */\n    const onScroll = () => {\n      if (!ticking) {\n        window.requestAnimationFrame(updateScrollDir);\n        ticking = true;\n      }\n    };\n\n    window.addEventListener('scroll', onScroll);\n\n    return () => window.removeEventListener('scroll', onScroll);\n  }, [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/index.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\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 { Axis, Direction };\nexport default useDetectScroll;\n"],"names":[],"mappings":"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"}

package/dist/types.d.ts

@@ -0,0 +1,90 @@
+/** 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"
+}
+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;
+};
+/** Type declaration for the returned scroll information */
+export 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 */
+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/package.json

@@ -5,21 +5,22 @@
   },
   "description": "Enhance your React apps with advanced scroll detection using @smakss/react-scroll-direction. This powerful hook not only detects scroll direction but also provides scroll position information. Ideal for React, Remix, Next.js, and Gatsby projects, it comes with adjustable sensitivity and supports ES Modules.",
   "devDependencies": {
-    "@commitlint/cli": "^18.6.0",
-    "@commitlint/config-conventional": "^18.6.0",
+    "@commitlint/cli": "^19.2.1",
+    "@commitlint/config-conventional": "^19.1.0",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-typescript": "^11.1.6",
-    "@types/react": "^18.2.55",
-    "@typescript-eslint/eslint-plugin": "^7.0.1",
-    "@typescript-eslint/parser": "^7.0.1",
-    "eslint": "^8.56.0",
+    "@types/react": "^18.2.74",
+    "@typescript-eslint/eslint-plugin": "^7.5.0",
+    "@typescript-eslint/parser": "^7.5.0",
+    "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",
-    "husky": "^9.0.10",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "husky": "^9.0.11",
     "lint-staged": "^15.2.2",
     "prettier": "^3.2.5",
-    "rollup": "^4.10.0",
-    "typescript": "^5.3.3"
+    "rollup": "^4.14.0",
+    "typescript": "^5.4.4"
   },
   "engines": {
     "node": ">=18.0.0"
@@ -74,9 +75,10 @@
     "lint": "eslint --cache --cache-location ./node_modules/.cache/.eslintcache --ext js,jsx,ts,tsx --max-warnings=0 .",
     "lint:fix": "eslint src/**/*.ts --fix",
     "setup": "yarn && husky install",
-    "typecheck": "tsc -b ."
+    "typecheck": "tsc -b .",
+    "update:deps": "rm -rf node_modules yarn.lock && ncu -u && yarn"
   },
   "type": "module",
   "types": "./dist/index.d.ts",
-  "version": "4.0.4"
+  "version": "4.2.0-beta.0"
 }