@smakss/react-scroll-direction 4.2.0 → 4.3.0-develop.3

package/Readme.md

@@ -1,25 +1,38 @@
 # React Scroll Direction Hook
 
-![npm](https://img.shields.io/npm/v/@smakss/react-scroll-direction) ![NPM](https://img.shields.io/npm/l/@smakss/react-scroll-direction) ![npm](https://img.shields.io/npm/dt/@smakss/react-scroll-direction) ![npm bundle size (scoped)](https://img.shields.io/bundlephobia/min/@smakss/react-scroll-direction)
-
-`@smakss/react-scroll-direction` is a versatile, lightweight React hook that not only detects the scroll direction but also provides the scroll position in your application with ease. This enhanced functionality includes detecting distances from the top, bottom, left, and right edges of the viewport, making it an ideal solution for advanced scroll-based interactions in your React applications.
-
-Originally inspired by a [popular StackOverflow response](https://stackoverflow.com/a/62497293/11908502), this package has evolved into a comprehensive tool for managing scroll detection in React applications.
+![npm](https://img.shields.io/npm/v/@smakss/react-scroll-direction)
+![NPM](https://img.shields.io/npm/l/@smakss/react-scroll-direction)
+![npm](https://img.shields.io/npm/dt/@smakss/react-scroll-direction)
+![install size](https://img.shields.io/npm/unpacked-size/%40smakss%2Freact-scroll-direction)
+
+`@smakss/react-scroll-direction` is a versatile, lightweight React hook that not
+only detects the scroll direction but also provides the scroll position in your
+application with ease. This enhanced functionality includes detecting distances
+from the top, bottom, left, and right edges of the viewport, making it an ideal
+solution for advanced scroll-based interactions in your React applications.
+
+Originally inspired by a
+[popular StackOverflow response](https://stackoverflow.com/a/62497293/11908502),
+this package has evolved into a comprehensive tool for managing scroll detection
+in React applications.
 
 ## Demo
 
-Experience the extended capabilities of `@smakss/react-scroll-direction` on CodeSandbox:
+Experience the extended capabilities of `@smakss/react-scroll-direction` on
+CodeSandbox:
 
 [![View @smakss/search](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/react-scroll-direction-tclwvp?fontsize=14&hidenavigation=1&theme=dark)
 
 ## Installation
 
-Install `@smakss/react-scroll-direction` via npm or yarn:
+Install `@smakss/react-scroll-direction` via npm, yarn, or pnpm:
 
 ```bash
 npm install @smakss/react-scroll-direction
 # or
 yarn add @smakss/react-scroll-direction
+# or
+pnpm add @smakss/react-scroll-direction
 ```
 
 Then, import it into your project:
@@ -27,40 +40,45 @@ Then, import it into your project:
 ES Module:
 
 ```js
-import useDetectScroll from '@smakss/react-scroll-direction';
+import useDetectScroll from '@smakss/react-scroll-direction'
 ```
 
 For TypeScript projects, import the hook and its types:
 
 ```ts
-import useDetectScroll, {
-  Axis,
-  Direction
-} from '@smakss/react-scroll-direction';
+import useDetectScroll, {Axis, Direction} from '@smakss/react-scroll-direction'
 ```
 
 ## Usage
 
-The `useDetectScroll` hook takes an options object with the following properties:
+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).
+- `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).
-- `scrollDown`: Value returned when scrolling down (y-axis) or right (x-axis) (default: `"down"` for y-axis, `"right"` for x-axis).
-- `still`: Value returned when there's no scrolling activity (default: `"still"`).
+- `scrollUp`: Value returned when scrolling up (y-axis) or left (x-axis)
+  (default: `"up"` for y-axis, `"left"` for x-axis).
+- `scrollDown`: Value returned when scrolling down (y-axis) or right (x-axis)
+  (default: `"down"` for y-axis, `"right"` for x-axis).
+- `still`: Value returned when there's no scrolling activity (default:
+  `"still"`).
 
 The hook returns an object with two properties:
 
-- `scrollDir`: Indicates the scroll direction (`"up"`, `"down"`, `"left"`, `"right"`, or `"still"`).
-- `scrollPosition`: An object containing distances from the top, bottom, left, and right edges of the viewport.
+- `scrollDir`: Indicates the scroll direction (`"up"`, `"down"`, `"left"`,
+  `"right"`, or `"still"`).
+- `scrollPosition`: An object containing distances from the top, bottom, left,
+  and right edges of the viewport.
 
 ## Examples
 
 To detect both scroll direction and position:
 
 ```js
-const { scrollDir, scrollPosition } = useDetectScroll();
+const {scrollDir, scrollPosition} = useDetectScroll()
 
 // scrollDir: "up", "down", "left", "right", or "still"
 // scrollPosition: { top, bottom, left, right }
@@ -69,7 +87,7 @@ const { scrollDir, scrollPosition } = useDetectScroll();
 To customize for horizontal scroll:
 
 ```js
-const { scrollDir, scrollPosition } = useDetectScroll({ axis: Axis.X });
+const {scrollDir, scrollPosition} = useDetectScroll({axis: Axis.X})
 
 // scrollDir: "left", "right", or "still"
 // scrollPosition: { top, bottom, left, right }
@@ -92,8 +110,11 @@ useEffect(() => {
 
 ## Contributing
 
-Interested in making contributions to this project? Please see [CONTRIBUTING.md](./CONTRIBUTING.md) for guidelines and details.
+Interested in making contributions to this project? Please see
+[CONTRIBUTING.md](./CONTRIBUTING.md) for guidelines and details.
 
 ## Code of Conduct
 
-We value and prioritize the well-being of all our contributors and users. To ensure that this project remains a welcoming space for everyone, please refer to our [Code of Conduct](./CODE_OF_CONDUCT.md).
+We value and prioritize the well-being of all our contributors and users. To
+ensure that this project remains a welcoming space for everyone, please refer to
+our [Code of Conduct](./CODE_OF_CONDUCT.md).

package/dist/index.d.ts

@@ -1,3 +1,3 @@
-import useDetectScroll from './useDetectScroll';
+import { default as useDetectScroll } from './useDetectScroll';
 export default useDetectScroll;
 export { Axis, Direction } from './types';

package/dist/index.js

@@ -1,163 +1,87 @@
-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.
- *
- * 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.
- */
-function useDetectScroll(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,
-        bottom: 0,
-        left: 0,
-        right: 0
-    });
-    const threshold = Math.max(0, thr);
-    const ticking = useRef(false);
-    const lastScroll = useRef(0);
-    /** Function to update scroll direction */
-    const updateScrollDir = useCallback(() => {
-        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;
-    }, [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 = () => {
-            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 });
-        };
-        updateScrollPosition();
-        const targetElement = target;
-        targetElement.addEventListener('scroll', updateScrollPosition);
-        return () => {
-            targetElement.removeEventListener('scroll', updateScrollPosition);
-        };
-    }, [target]);
-    useEffect(() => {
-        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;
-            }
-        };
-        const targetElement = target;
-        targetElement.addEventListener('scroll', onScroll);
-        return () => targetElement.removeEventListener('scroll', onScroll);
-    }, [target, axis, updateScrollDir]);
-    return { scrollDir, scrollPosition };
+import { useState as h, useRef as m, useCallback as x, useEffect as g } from "react";
+const l = {
+  /**
+   * Horizontal axis.
+   */
+  X: "x",
+  /**
+   * Vertical axis.
+   */
+  Y: "y"
+}, c = {
+  /**
+   * Scroll direction toward the top.
+   */
+  Up: "up",
+  /**
+   * Scroll direction toward the bottom.
+   */
+  Down: "down",
+  /**
+   * Scroll direction toward the left.
+   */
+  Left: "left",
+  /**
+   * Scroll direction toward the right.
+   */
+  Right: "right",
+  /**
+   * No scrolling detected.
+   */
+  Still: "still"
+};
+function H(p = {}) {
+  const {
+    target: t = typeof window < "u" ? window : void 0,
+    thr: S = 0,
+    axis: o = l.Y,
+    scrollUp: i = o === l.Y ? c.Up : c.Left,
+    scrollDown: a = o === l.Y ? c.Down : c.Right,
+    still: Y = c.Still
+  } = p, [D, W] = h(Y), [E, L] = h({
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0
+  }), u = Math.max(0, S), s = m(!1), n = m(0), f = x(() => {
+    if (!t) return;
+    let e;
+    t instanceof Window ? e = o === l.Y ? t.scrollY : t.scrollX : e = o === l.Y ? t.scrollTop : t.scrollLeft, Math.abs(e - n.current) >= u && (W(e > n.current ? a : i), n.current = Math.max(0, e)), s.current = !1;
+  }, [t, o, u, a, i]);
+  return g(() => {
+    if (!t) {
+      console.warn(
+        "useDetectScroll: target is not set. Falling back to window."
+      );
+      return;
+    }
+    const e = () => {
+      if (!t) return;
+      const d = t instanceof Window ? t.scrollY : t.scrollTop, w = t instanceof Window ? t.scrollX : t.scrollLeft, v = (t instanceof Window ? document.documentElement.scrollHeight - t.innerHeight : t.scrollHeight - t.clientHeight) - d, b = (t instanceof Window ? document.documentElement.scrollWidth - t.innerWidth : t.scrollWidth - t.clientWidth) - w;
+      L({ top: d, bottom: v, left: w, right: b });
+    };
+    e();
+    const r = t;
+    return r.addEventListener("scroll", e), () => {
+      r.removeEventListener("scroll", e);
+    };
+  }, [t]), g(() => {
+    if (!t) {
+      console.warn(
+        "useDetectScroll: target is not set. Falling back to window."
+      );
+      return;
+    }
+    t instanceof Window ? n.current = o === l.Y ? t.scrollY : t.scrollX : n.current = o === l.Y ? t.scrollTop : t.scrollLeft;
+    const e = () => {
+      s.current || (window.requestAnimationFrame(f), s.current = !0);
+    }, r = t;
+    return r.addEventListener("scroll", e), () => r.removeEventListener("scroll", e);
+  }, [t, o, f]), { scrollDir: D, scrollPosition: E };
 }
-
-export { Axis, Direction, useDetectScroll as default };
+export {
+  l as Axis,
+  c as Direction,
+  H as default
+};
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"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":";;AAAA;IACY,KASX;AATD,CAAA,UAAY,IAAI,EAAA;AACd;;AAEG;AACH,IAAA,IAAA,CAAA,GAAA,CAAA,GAAA,GAAO,CAAA;AACP;;AAEG;AACH,IAAA,IAAA,CAAA,GAAA,CAAA,GAAA,GAAO,CAAA;AACT,CAAC,EATW,IAAI,KAAJ,IAAI,GASf,EAAA,CAAA,CAAA,CAAA;AAED;IACY,UAqBX;AArBD,CAAA,UAAY,SAAS,EAAA;AACnB;;AAEG;AACH,IAAA,SAAA,CAAA,IAAA,CAAA,GAAA,IAAS,CAAA;AACT;;AAEG;AACH,IAAA,SAAA,CAAA,MAAA,CAAA,GAAA,MAAa,CAAA;AACb;;AAEG;AACH,IAAA,SAAA,CAAA,MAAA,CAAA,GAAA,MAAa,CAAA;AACb;;AAEG;AACH,IAAA,SAAA,CAAA,OAAA,CAAA,GAAA,OAAe,CAAA;AACf;;AAEG;AACH,IAAA,SAAA,CAAA,OAAA,CAAA,GAAA,OAAe,CAAA;AACjB,CAAC,EArBW,SAAS,KAAT,SAAS,GAqBpB,EAAA,CAAA,CAAA;;ACzBD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCG;AACH,SAAS,eAAe,CAAC,KAAA,GAAqB,EAAE,EAAA;AAC9C,IAAA,MAAM,EACJ,MAAM,GAAG,OAAO,MAAM,KAAK,WAAW,GAAG,MAAM,GAAG,SAAS,EAC3D,GAAG,GAAG,CAAC,EACP,IAAI,GAAG,IAAI,CAAC,CAAC,EACb,QAAQ,GAAG,IAAI,KAAK,IAAI,CAAC,CAAC,GAAG,SAAS,CAAC,EAAE,GAAG,SAAS,CAAC,IAAI,EAC1D,UAAU,GAAG,IAAI,KAAK,IAAI,CAAC,CAAC,GAAG,SAAS,CAAC,IAAI,GAAG,SAAS,CAAC,KAAK,EAC/D,KAAK,GAAG,SAAS,CAAC,KAAK,EACxB,GAAG,KAAK,CAAC;IAEV,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAY,KAAK,CAAC,CAAC;AAC7D,IAAA,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAiB;AACnE,QAAA,GAAG,EAAE,CAAC;AACN,QAAA,MAAM,EAAE,CAAC;AACT,QAAA,IAAI,EAAE,CAAC;AACP,QAAA,KAAK,EAAE,CAAC;AACT,KAAA,CAAC,CAAC;IAEH,MAAM,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;AACnC,IAAA,MAAM,OAAO,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;AAC9B,IAAA,MAAM,UAAU,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;;AAG7B,IAAA,MAAM,eAAe,GAAG,WAAW,CAAC,MAAK;AACvC,QAAA,IAAI,CAAC,MAAM;YAAE,OAAO;AAEpB,QAAA,IAAI,MAAc,CAAC;AACnB,QAAA,IAAI,MAAM,YAAY,MAAM,EAAE;AAC5B,YAAA,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC,CAAC,GAAG,MAAM,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC;SAC5D;aAAM;AACL,YAAA,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC,CAAC,GAAG,MAAM,CAAC,SAAS,GAAG,MAAM,CAAC,UAAU,CAAC;SACjE;AAED,QAAA,IAAI,IAAI,CAAC,GAAG,CAAC,MAAM,GAAG,UAAU,CAAC,OAAO,CAAC,IAAI,SAAS,EAAE;AACtD,YAAA,YAAY,CAAC,MAAM,GAAG,UAAU,CAAC,OAAO,GAAG,UAAU,GAAG,QAAQ,CAAC,CAAC;YAClE,UAAU,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;SAC1C;AACD,QAAA,OAAO,CAAC,OAAO,GAAG,KAAK,CAAC;AAC1B,KAAC,EAAE,CAAC,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEpD,SAAS,CAAC,MAAK;QACb,IAAI,CAAC,MAAM,EAAE;AACX,YAAA,OAAO,CAAC,IAAI,CACV,6DAA6D,CAC9D,CAAC;YACF,OAAO;SACR;;QAGD,MAAM,oBAAoB,GAAG,MAAK;AAChC,YAAA,IAAI,CAAC,MAAM;gBAAE,OAAO;AAEpB,YAAA,MAAM,GAAG,GAAG,MAAM,YAAY,MAAM,GAAG,MAAM,CAAC,OAAO,GAAG,MAAM,CAAC,SAAS,CAAC;AACzE,YAAA,MAAM,IAAI,GACR,MAAM,YAAY,MAAM,GAAG,MAAM,CAAC,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC;AAEhE,YAAA,MAAM,MAAM,GACV,CAAC,MAAM,YAAY,MAAM;kBACrB,QAAQ,CAAC,eAAe,CAAC,YAAY,GAAG,MAAM,CAAC,WAAW;kBAC1D,MAAM,CAAC,YAAY,GAAG,MAAM,CAAC,YAAY,IAAI,GAAG,CAAC;AACvD,YAAA,MAAM,KAAK,GACT,CAAC,MAAM,YAAY,MAAM;kBACrB,QAAQ,CAAC,eAAe,CAAC,WAAW,GAAG,MAAM,CAAC,UAAU;kBACxD,MAAM,CAAC,WAAW,GAAG,MAAM,CAAC,WAAW,IAAI,IAAI,CAAC;YAEtD,iBAAiB,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC;AAClD,SAAC,CAAC;AAEF,QAAA,oBAAoB,EAAE,CAAC;QAEvB,MAAM,aAAa,GAAG,MAAqB,CAAC;AAC5C,QAAA,aAAa,CAAC,gBAAgB,CAAC,QAAQ,EAAE,oBAAoB,CAAC,CAAC;AAE/D,QAAA,OAAO,MAAK;AACV,YAAA,aAAa,CAAC,mBAAmB,CAAC,QAAQ,EAAE,oBAAoB,CAAC,CAAC;AACpE,SAAC,CAAC;AACJ,KAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,SAAS,CAAC,MAAK;QACb,IAAI,CAAC,MAAM,EAAE;AACX,YAAA,OAAO,CAAC,IAAI,CACV,6DAA6D,CAC9D,CAAC;YACF,OAAO;SACR;AAED,QAAA,IAAI,MAAM,YAAY,MAAM,EAAE;YAC5B,UAAU,CAAC,OAAO,GAAG,IAAI,KAAK,IAAI,CAAC,CAAC,GAAG,MAAM,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC;SACxE;aAAM;AACL,YAAA,UAAU,CAAC,OAAO;AAChB,gBAAA,IAAI,KAAK,IAAI,CAAC,CAAC,GAAG,MAAM,CAAC,SAAS,GAAG,MAAM,CAAC,UAAU,CAAC;SAC1D;QAED,MAAM,QAAQ,GAAG,MAAK;AACpB,YAAA,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE;AACpB,gBAAA,MAAM,CAAC,qBAAqB,CAAC,eAAe,CAAC,CAAC;AAC9C,gBAAA,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC;aACxB;AACH,SAAC,CAAC;QAEF,MAAM,aAAa,GAAG,MAAqB,CAAC;AAC5C,QAAA,aAAa,CAAC,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;QAEnD,OAAO,MAAM,aAAa,CAAC,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;KACpE,EAAE,CAAC,MAAM,EAAE,IAAI,EAAE,eAAe,CAAC,CAAC,CAAC;AAEpC,IAAA,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;AACvC;;;;"}
+{"version":3,"file":"index.js","sources":["../src/types.ts","../src/useDetectScroll.ts"],"sourcesContent":["/**\n * Axis values (const + type)\n */\nexport const Axis = {\n    /**\n     * Horizontal axis.\n     */\n    X: 'x',\n    /**\n     * Vertical axis.\n     */\n    Y: 'y',\n} as const\n\n/**\n * Union of allowed axis values.\n */\nexport type Axis = (typeof Axis)[keyof typeof Axis]\n\n/**\n * Direction values (const + type)\n */\nexport const Direction = {\n    /**\n     * Scroll direction toward the top.\n     */\n    Up: 'up',\n    /**\n     * Scroll direction toward the bottom.\n     */\n    Down: 'down',\n    /**\n     * Scroll direction toward the left.\n     */\n    Left: 'left',\n    /**\n     * Scroll direction toward the right.\n     */\n    Right: 'right',\n    /**\n     * No scrolling detected.\n     */\n    Still: 'still',\n} as const\n\n/**\n * Union of allowed direction values.\n */\nexport type Direction = (typeof Direction)[keyof typeof Direction]\n\n/**\n * Scroll position values\n */\nexport type ScrollPosition = {\n    /**\n     * Distance from the top edge.\n     */\n    top: number\n    /**\n     * Distance from the bottom edge.\n     */\n    bottom: number\n    /**\n     * Distance from the left edge.\n     */\n    left: number\n    /**\n     * Distance from the right edge.\n     */\n    right: number\n}\n\n/**\n * Scroll info returned by the hook\n */\nexport type ScrollInfo = {\n    /**\n     * Current scroll direction.\n     */\n    scrollDir: Direction\n    /**\n     * Current scroll position.\n     */\n    scrollPosition: ScrollPosition\n}\n\n/**\n * Options accepted by the hook\n */\nexport type ScrollProps = {\n    /**\n     * Scroll target element (defaults to window).\n     */\n    target?: HTMLDivElement | Window\n    /**\n     * Threshold for scroll direction changes.\n     */\n    thr?: number\n    /**\n     * Axis to observe.\n     */\n    axis?: Axis\n    /**\n     * Value returned when scrolling up (y) or left (x).\n     */\n    scrollUp?: Direction\n    /**\n     * Value returned when scrolling down (y) or right (x).\n     */\n    scrollDown?: Direction\n    /**\n     * Value returned when no scrolling is detected.\n     */\n    still?: Direction\n}\n","import {useCallback, useEffect, useRef, useState} from 'react'\nimport {Axis, Direction, ScrollInfo, ScrollPosition, ScrollProps} 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 =\n                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 =\n                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":["Axis","Direction","useDetectScroll","props","target","thr","axis","scrollUp","scrollDown","still","scrollDir","setScrollDir","useState","scrollPosition","setScrollPosition","threshold","ticking","useRef","lastScroll","updateScrollDir","useCallback","scroll","useEffect","updateScrollPosition","top","left","bottom","right","targetElement","onScroll"],"mappings":"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"}

package/dist/types.d.ts

@@ -1,86 +1,109 @@
-export declare enum Axis {
+/**
+ * Axis values (const + type)
+ */
+export declare const Axis: {
     /**
-     * The x-axis represents the horizontal direction.
+     * Horizontal axis.
      */
-    X = "x",
+    readonly X: "x";
     /**
-     * The y-axis represents the vertical direction.
+     * Vertical axis.
      */
-    Y = "y"
-}
-export declare enum Direction {
+    readonly Y: "y";
+};
+/**
+ * Union of allowed axis values.
+ */
+export type Axis = (typeof Axis)[keyof typeof Axis];
+/**
+ * Direction values (const + type)
+ */
+export declare const Direction: {
     /**
-     * The up direction represents the scroll direction moving towards the top.
+     * Scroll direction toward the top.
      */
-    Up = "up",
+    readonly Up: "up";
     /**
-     * The down direction represents the scroll direction moving towards the bottom.
+     * Scroll direction toward the bottom.
      */
-    Down = "down",
+    readonly Down: "down";
     /**
-     * The left direction represents the scroll direction moving towards the left.
+     * Scroll direction toward the left.
      */
-    Left = "left",
+    readonly Left: "left";
     /**
-     * The right direction represents the scroll direction moving towards the right.
+     * Scroll direction toward the right.
      */
-    Right = "right",
+    readonly Right: "right";
     /**
-     * The still direction represents the scroll direction when the user is not scrolling.
+     * No scrolling detected.
      */
-    Still = "still"
-}
+    readonly Still: "still";
+};
+/**
+ * Union of allowed direction values.
+ */
+export type Direction = (typeof Direction)[keyof typeof Direction];
+/**
+ * Scroll position values
+ */
 export type ScrollPosition = {
     /**
-     * The top position represents the distance from the top edge of the page.
+     * Distance from the top edge.
      */
     top: number;
     /**
-     * The bottom position represents the distance from the bottom edge of the page.
+     * Distance from the bottom edge.
      */
     bottom: number;
     /**
-     * The left position represents the distance from the left edge of the page.
+     * Distance from the left edge.
      */
     left: number;
     /**
-     * The right position represents the distance from the right edge of the page.
+     * Distance from the right edge.
      */
     right: number;
 };
+/**
+ * Scroll info returned by the hook
+ */
 export type ScrollInfo = {
     /**
-     * The scrollDir represents the current scroll direction.
+     * Current scroll direction.
      */
     scrollDir: Direction;
     /**
-     * The scrollPosition represents the current scroll position.
+     * Current scroll position.
      */
     scrollPosition: ScrollPosition;
 };
+/**
+ * Options accepted by the hook
+ */
 export type ScrollProps = {
     /**
-     * The target represents the scrollable element to check for scroll detection.
+     * Scroll target element (defaults to window).
      */
     target?: HTMLDivElement | Window;
     /**
-     * The thr represents the threshold value for scroll detection.
+     * Threshold for scroll direction changes.
      */
     thr?: number;
     /**
-     * The axis represents the scroll axis (x or y).
+     * Axis to observe.
      */
     axis?: Axis;
     /**
-     * The scrollUp represents the scroll direction when moving up.
+     * Value returned when scrolling up (y) or left (x).
      */
     scrollUp?: Direction;
     /**
-     * The scrollDown represents the scroll direction when moving down.
+     * Value returned when scrolling down (y) or right (x).
      */
     scrollDown?: Direction;
     /**
-     * The still represents the scroll direction when the user is not scrolling.
+     * Value returned when no scrolling is detected.
      */
     still?: Direction;
 };

package/package.json

@@ -5,28 +5,38 @@
   },
   "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": "^19.3.0",
-    "@commitlint/config-conventional": "^19.2.2",
-    "@rollup/plugin-node-resolve": "^15.2.3",
-    "@rollup/plugin-typescript": "^11.1.6",
-    "@types/react": "^18.3.3",
-    "@typescript-eslint/eslint-plugin": "^7.17.0",
-    "@typescript-eslint/parser": "^7.17.0",
-    "eslint": "^9.8.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-react-hooks": "^4.6.2",
-    "husky": "^9.1.3",
-    "lint-staged": "^15.2.7",
-    "prettier": "^3.3.3",
-    "rollup": "^4.19.1",
-    "typescript": "^5.5.4"
+    "@commitlint/cli": "^20.4.0",
+    "@commitlint/config-conventional": "^20.4.0",
+    "@semantic-release/changelog": "^6.0.3",
+    "@semantic-release/commit-analyzer": "^13.0.1",
+    "@semantic-release/git": "^10.0.1",
+    "@semantic-release/github": "^12.0.3",
+    "@semantic-release/npm": "^13.1.3",
+    "@semantic-release/release-notes-generator": "^14.1.0",
+    "@types/react": "^19.2.10",
+    "@typescript-eslint/eslint-plugin": "^8.54.0",
+    "@typescript-eslint/parser": "^8.54.0",
+    "eslint": "^9.39.2",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.5",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "husky": "^9.1.7",
+    "lint-staged": "^16.2.7",
+    "prettier": "^3.8.1",
+    "prettier-plugin-organize-imports": "^4.3.0",
+    "semantic-release": "^25.0.3",
+    "typescript": "^5.9.3",
+    "vite": "^6.4.1",
+    "vite-plugin-dts": "^4.5.4"
   },
   "engines": {
-    "node": ">=18.0.0"
+    "node": ">=22.14.0"
   },
   "exports": {
-    ".": "./dist/index.js"
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
   },
   "files": [
     "dist"
@@ -43,7 +53,7 @@
     "direction-and-position-detection",
     "scroll-hook",
     "npm",
-    "yarn",
+    "pnpm",
     "react",
     "remix",
     "nextjs",
@@ -59,7 +69,7 @@
     "react scroll direction and position"
   ],
   "license": "MIT",
-  "main": "dist/es/index.js",
+  "main": "dist/index.js",
   "name": "@smakss/react-scroll-direction",
   "peerDependencies": {
     "react": ">=16.8.0"
@@ -71,14 +81,23 @@
   "scripts": {
     "format": "prettier --write \"**/*.+(js|jsx|json|yml|yaml|css|ts|tsx|md|gql|graphql|mdx)\"",
     "format:check": "prettier -l \"**/*.+(js|jsx|json|yml|yaml|css|ts|tsx|md|gql|graphql|mdx)\"",
-    "generate": "rollup -c",
-    "lint": "npx eslint --cache --cache-location ./node_modules/.cache/.eslintcache --max-warnings=0 .",
-    "lint:fix": "npx eslint --fix .",
-    "setup": "yarn && husky install",
-    "typecheck": "tsc -b .",
-    "update:deps": "rm -rf node_modules yarn.lock && npx npm-check-updates -u && yarn"
+    "build": "rm -rf dist && vite build",
+    "build:playground": "pnpm -C playground build",
+    "generate": "rm -rf dist && vite build",
+    "lint:main": "eslint --cache --cache-location ./node_modules/.cache/.eslintcache --max-warnings=0 \"src/**/*.{js,jsx,ts,tsx}\" eslint.config.js vite.config.ts --no-warn-ignored",
+    "lint:playground": "pnpm -C playground lint",
+    "lint": "pnpm lint:main && pnpm lint:playground",
+    "lint:fix:main": "eslint --fix \"src/**/*.{js,jsx,ts,tsx}\" eslint.config.js vite.config.ts --no-warn-ignored",
+    "lint:fix:playground": "pnpm -C playground eslint --fix . --no-warn-ignored",
+    "prepare": "if [ \"$NODE_ENV\" != \"production\" ]; then husky; fi",
+    "setup": "pnpm install && husky",
+    "release": "semantic-release",
+    "typecheck:main": "tsc -b .",
+    "typecheck:playground": "pnpm build && pnpm -C playground exec tsc -p tsconfig.json",
+    "typecheck": "pnpm typecheck:main && pnpm typecheck:playground",
+    "update:deps": "rm -rf node_modules pnpm-lock.yaml && npx npm-check-updates -u && pnpm install"
   },
   "type": "module",
   "types": "./dist/index.d.ts",
-  "version": "4.2.0"
+  "version": "4.3.0-develop.3"
 }