@smakss/react-scroll-direction 1.1.0-beta → 2.0.0

package/Readme.md

@@ -1,61 +1,65 @@
-# Detect react scroll direction
+# React Scroll Direction Hook
 
 ![npm](https://img.shields.io/npm/v/@smakss/react-scroll-direction) ![Snyk Vulnerabilities for npm package](https://img.shields.io/snyk/vulnerabilities/npm/@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)
 
-This is a custom hook for react which is useful to detect scroll direction in React applications in an efficient way with a custom threshold.
+Detect scroll direction in your React applications effortlessly using `@smakss/react-scroll-direction`, a custom React Hook with an adjustable threshold.
 
-This package is created on behalf of a [StackOverflow answer](https://stackoverflow.com/a/62497293/11908502) which draws some attention to itself, so if someone just wants something to work with right away, they can access it easily here.
+This package was inspired by a [popular StackOverflow answer](https://stackoverflow.com/a/62497293/11908502), crafted to be a ready-to-use solution for detecting scroll direction in your React applications.
 
 ## Demo
 
+Click the button below to view a demo 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)
 
-## How it works?
+## Installation
 
-To install it you can simply do the following command:
+Install the package using npm or yarn:
 
 ```bash
-npm i @smakss/react-scroll-direction
-or
+npm install @smakss/react-scroll-direction
+# or
 yarn add @smakss/react-scroll-direction
 ```
 
-to include it with common js module you should do this:
+To include it in your project, use:
+
+CommonJS:
 
 ```js
-var { useDetectScroll } = require("@smakss/react-scroll-direction");
+const { useDetectScroll } = require("@smakss/react-scroll-direction");
 ```
 
-and to include it with ECMAscript module you can simply do this one:
+ES Module:
 
 ```js
 import { useDetectScroll } from "@smakss/react-scroll-direction";
 ```
 
-then to use it within your application you can do it just like below:
+## Usage
 
-The useDetectScroll custom hook will accept 3 input parameter:
+The `useDetectScroll` custom hook accepts an options object with the following properties:
 
-- `thr` (`number`): A number to indicate the threshold of firing scroll direction event, which is `0` by default and only accepts a positive numeric value. If it gets a higher value the steps will be longer.
-- `axis` (`string`): Indicate the page scroll axis, whether, in the `y` or `x` axes, it is `y` by default.
-- `scrollUp` (`string`): A string value for the output of the custom hook if the scroll direction is upward. The default value is `up` if the axis is `y` and `left` if the axis is `x`.
-- `scrollDown` (`string`): A string value for the output of the custom hook if the scroll direction is downward. The default value is `down` if the axis is `y` and `right` if the axis is `x`.
-- `still` (`string`): default value for the direction when there is no scrolling happening on the page. The default value is `still`.
+- `thr`: Threshold to trigger scroll direction change (default: `0`, only accepts positive values).
+- `axis`: Scroll axis (`"y"` or `"x"`, default: `"y"`).
+- `scrollUp`: Output value when scrolling up or left (default: `"up"` for y-axis, `"left"` for x-axis).
+- `scrollDown`: Output value when scrolling down or right (default: `"down"` for y-axis, `"right"` for x-axis).
+- `still`: Output value when no scrolling is detected (default: `"still"`).
 
-## Examples of usage
+## Examples
 
-### If the scroll goes upward/downward
+Detecting scroll up/down:
 
 ```js
-const [scrollDir] = useDetectScroll({});
+const scrollDir = useDetectScroll({});
 
-// scrollDir: "up"/"down"
+// Outputs: "up", "down", or "still"
 ```
 
-### If the scroll goes left/right
+Detecting scroll left/right:
 
 ```js
-const [scrollDir] = useDetectScroll({ axis: "x" });
+const scrollDir = useDetectScroll({ axis: "x" });
 
-// scrollDir: "left"/"right"
+// Outputs: "left", "right", or "still"
 ```

package/dist/cjs/index.js

@@ -2,11 +2,13 @@
 
 var react = require('react');
 
+/** Enumeration for axis values */
 var Axis;
 (function (Axis) {
     Axis["X"] = "x";
     Axis["Y"] = "y";
 })(Axis || (Axis = {}));
+/** Enumeration for direction values */
 var Direction;
 (function (Direction) {
     Direction["Up"] = "up";
@@ -15,12 +17,48 @@ var Direction;
     Direction["Right"] = "right";
     Direction["Still"] = "still";
 })(Direction || (Direction = {}));
+/**
+ * useDetectScroll hook.
+ *
+ * This hook provides a mechanism to detect the scroll direction.
+ * It will return the scroll direction as a string (up, down, left, right, or still) based on user scrolling.
+ *
+ * @example
+ *
+ * import useDetectScroll, { Axis, Direction } from './useDetectScroll';
+ *
+ * function App() {
+ *   const scrollDirection = useDetectScroll({
+ *     thr: 100,
+ *     axis: Axis.Y,
+ *     scrollUp: Direction.Up,
+ *     scrollDown: Direction.Down,
+ *     still: Direction.Still
+ *   });
+ *
+ *   return (
+ *     <div>
+ *       <p>Current scroll direction: {scrollDirection}</p>
+ *     </div>
+ *   );
+ * }
+ *
+ * @param {ScrollProps} props - The properties related to scrolling.
+ * @property {number} props.thr - The threshold value which the scroll difference must exceed to update scroll direction.
+ * @property {Axis} props.axis - The axis along which to detect scroll. Can be 'x' or 'y'.
+ * @property {Direction} props.scrollUp - The direction to set when scrolling up or left. By default, 'up' for y-axis and 'left' for x-axis.
+ * @property {Direction} props.scrollDown - The direction to set when scrolling down or right. By default, 'down' for y-axis and 'right' for x-axis.
+ * @property {Direction} props.still - The direction to set when there is no scrolling. By default, 'still'.
+ *
+ * @returns {Direction} - The current direction 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 [scrollDir, setScrollDir] = react.useState(still);
     const threshold = Math.max(0, thr);
     let ticking = false;
     let lastScroll = axis === Axis.Y ? window.scrollY : window.scrollX;
+    /** Function to update scroll direction */
     const updateScrollDir = react.useCallback(() => {
         const scroll = axis === Axis.Y ? window.scrollY : window.scrollX;
         if (Math.abs(scroll - lastScroll) >= threshold) {
@@ -30,6 +68,7 @@ function useDetectScroll(props) {
         ticking = false;
     }, [axis, threshold, scrollDown, scrollUp]);
     react.useEffect(() => {
+        /** Function to handle onScroll event */
         const onScroll = () => {
             if (!ticking) {
                 window.requestAnimationFrame(updateScrollDir);
@@ -39,7 +78,7 @@ function useDetectScroll(props) {
         window.addEventListener("scroll", onScroll);
         return () => window.removeEventListener("scroll", onScroll);
     }, [updateScrollDir]);
-    return [scrollDir];
+    return scrollDir;
 }
 
 exports.useDetectScroll = useDetectScroll;

package/dist/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/hooks/useDetectScroll.ts"],"sourcesContent":["import { useState, useEffect, useCallback } from \"react\";\n\nenum Axis {\n  X = \"x\",\n  Y = \"y\",\n}\n\nenum Direction {\n  Up = \"up\",\n  Down = \"down\",\n  Left = \"left\",\n  Right = \"right\",\n  Still = \"still\",\n}\n\ntype ScrollProps = {\n  thr?: number;\n  axis?: Axis;\n  scrollUp?: string;\n  scrollDown?: string;\n  still?: string;\n};\n\nfunction useDetectScroll(props: ScrollProps) {\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(still);\n\n  const threshold = Math.max(0, thr);\n  let ticking = false;\n  let lastScroll: number = axis === Axis.Y ? window.scrollY : window.scrollX;\n\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    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];\n}\n\nexport default useDetectScroll;\n"],"names":["useState","useCallback","useEffect"],"mappings":";;;;AAEA,IAAK,IAGJ,CAAA;AAHD,CAAA,UAAK,IAAI,EAAA;AACP,IAAA,IAAA,CAAA,GAAA,CAAA,GAAA,GAAO,CAAA;AACP,IAAA,IAAA,CAAA,GAAA,CAAA,GAAA,GAAO,CAAA;AACT,CAAC,EAHI,IAAI,KAAJ,IAAI,GAGR,EAAA,CAAA,CAAA,CAAA;AAED,IAAK,SAMJ,CAAA;AAND,CAAA,UAAK,SAAS,EAAA;AACZ,IAAA,SAAA,CAAA,IAAA,CAAA,GAAA,IAAS,CAAA;AACT,IAAA,SAAA,CAAA,MAAA,CAAA,GAAA,MAAa,CAAA;AACb,IAAA,SAAA,CAAA,MAAA,CAAA,GAAA,MAAa,CAAA;AACb,IAAA,SAAA,CAAA,OAAA,CAAA,GAAA,OAAe,CAAA;AACf,IAAA,SAAA,CAAA,OAAA,CAAA,GAAA,OAAe,CAAA;AACjB,CAAC,EANI,SAAS,KAAT,SAAS,GAMb,EAAA,CAAA,CAAA,CAAA;AAUD,SAAS,eAAe,CAAC,KAAkB,EAAA;IACzC,MAAM,EACJ,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,GACxB,GAAG,KAAK,CAAC;IAEV,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAGA,cAAQ,CAAC,KAAK,CAAC,CAAC;IAElD,MAAM,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;IACnC,IAAI,OAAO,GAAG,KAAK,CAAC;AACpB,IAAA,IAAI,UAAU,GAAW,IAAI,KAAK,IAAI,CAAC,CAAC,GAAG,MAAM,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC;AAE3E,IAAA,MAAM,eAAe,GAAGC,iBAAW,CAAC,MAAK;AACvC,QAAA,MAAM,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC,CAAC,GAAG,MAAM,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC;QAEjE,IAAI,IAAI,CAAC,GAAG,CAAC,MAAM,GAAG,UAAU,CAAC,IAAI,SAAS,EAAE;AAC9C,YAAA,YAAY,CAAC,MAAM,GAAG,UAAU,GAAG,UAAU,GAAG,QAAQ,CAAC,CAAC;YAC1D,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;AAClC,SAAA;QACD,OAAO,GAAG,KAAK,CAAC;KACjB,EAAE,CAAC,IAAI,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE5CC,eAAS,CAAC,MAAK;QACb,MAAM,QAAQ,GAAG,MAAK;YACpB,IAAI,CAAC,OAAO,EAAE;AACZ,gBAAA,MAAM,CAAC,qBAAqB,CAAC,eAAe,CAAC,CAAC;gBAC9C,OAAO,GAAG,IAAI,CAAC;AAChB,aAAA;AACH,SAAC,CAAC;AAEF,QAAA,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;QAE5C,OAAO,MAAM,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;AAC9D,KAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;IAEtB,OAAO,CAAC,SAAS,CAAC,CAAC;AACrB;;;;"}
+{"version":3,"file":"index.js","sources":["../../src/hooks/useDetectScroll.ts"],"sourcesContent":["import { useState, useEffect, useCallback } from \"react\";\n\n/** Enumeration for axis values */\nenum Axis {\n  X = \"x\",\n  Y = \"y\",\n}\n\n/** Enumeration for direction values */\nenum Direction {\n  Up = \"up\",\n  Down = \"down\",\n  Left = \"left\",\n  Right = \"right\",\n  Still = \"still\",\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.\n * It will return the scroll direction as a string (up, down, left, right, or still) based on user scrolling.\n *\n * @example\n *\n * import useDetectScroll, { Axis, Direction } from './useDetectScroll';\n *\n * function App() {\n *   const scrollDirection = 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: {scrollDirection}</p>\n *     </div>\n *   );\n * }\n *\n * @param {ScrollProps} props - The properties related to scrolling.\n * @property {number} props.thr - The threshold value which the scroll difference must exceed to update scroll direction.\n * @property {Axis} props.axis - The axis along which to detect scroll. Can be 'x' or 'y'.\n * @property {Direction} props.scrollUp - The direction to set when scrolling up or left. By default, 'up' for y-axis and 'left' for x-axis.\n * @property {Direction} props.scrollDown - The direction to set when scrolling down or right. By default, 'down' for y-axis and 'right' for x-axis.\n * @property {Direction} props.still - The direction to set when there is no scrolling. By default, 'still'.\n *\n * @returns {Direction} - The current direction of scrolling.\n */\nfunction useDetectScroll(props: ScrollProps): Direction {\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\n  const threshold = Math.max(0, thr);\n  let ticking = false;\n  let lastScroll: number = axis === Axis.Y ? window.scrollY : window.scrollX;\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 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;\n}\n\nexport default useDetectScroll;\n"],"names":["useState","useCallback","useEffect"],"mappings":";;;;AAEA;AACA,IAAK,IAGJ,CAAA;AAHD,CAAA,UAAK,IAAI,EAAA;AACP,IAAA,IAAA,CAAA,GAAA,CAAA,GAAA,GAAO,CAAA;AACP,IAAA,IAAA,CAAA,GAAA,CAAA,GAAA,GAAO,CAAA;AACT,CAAC,EAHI,IAAI,KAAJ,IAAI,GAGR,EAAA,CAAA,CAAA,CAAA;AAED;AACA,IAAK,SAMJ,CAAA;AAND,CAAA,UAAK,SAAS,EAAA;AACZ,IAAA,SAAA,CAAA,IAAA,CAAA,GAAA,IAAS,CAAA;AACT,IAAA,SAAA,CAAA,MAAA,CAAA,GAAA,MAAa,CAAA;AACb,IAAA,SAAA,CAAA,MAAA,CAAA,GAAA,MAAa,CAAA;AACb,IAAA,SAAA,CAAA,OAAA,CAAA,GAAA,OAAe,CAAA;AACf,IAAA,SAAA,CAAA,OAAA,CAAA,GAAA,OAAe,CAAA;AACjB,CAAC,EANI,SAAS,KAAT,SAAS,GAMb,EAAA,CAAA,CAAA,CAAA;AAWD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCG;AACH,SAAS,eAAe,CAAC,KAAkB,EAAA;IACzC,MAAM,EACJ,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,GACxB,GAAG,KAAK,CAAC;IAEV,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAGA,cAAQ,CAAY,KAAK,CAAC,CAAC;IAE7D,MAAM,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;IACnC,IAAI,OAAO,GAAG,KAAK,CAAC;AACpB,IAAA,IAAI,UAAU,GAAW,IAAI,KAAK,IAAI,CAAC,CAAC,GAAG,MAAM,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC;;AAG3E,IAAA,MAAM,eAAe,GAAGC,iBAAW,CAAC,MAAK;AACvC,QAAA,MAAM,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC,CAAC,GAAG,MAAM,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC;QAEjE,IAAI,IAAI,CAAC,GAAG,CAAC,MAAM,GAAG,UAAU,CAAC,IAAI,SAAS,EAAE;AAC9C,YAAA,YAAY,CAAC,MAAM,GAAG,UAAU,GAAG,UAAU,GAAG,QAAQ,CAAC,CAAC;YAC1D,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;AAClC,SAAA;QACD,OAAO,GAAG,KAAK,CAAC;KACjB,EAAE,CAAC,IAAI,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE5CC,eAAS,CAAC,MAAK;;QAEb,MAAM,QAAQ,GAAG,MAAK;YACpB,IAAI,CAAC,OAAO,EAAE;AACZ,gBAAA,MAAM,CAAC,qBAAqB,CAAC,eAAe,CAAC,CAAC;gBAC9C,OAAO,GAAG,IAAI,CAAC;AAChB,aAAA;AACH,SAAC,CAAC;AAEF,QAAA,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;QAE5C,OAAO,MAAM,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;AAC9D,KAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;AAEtB,IAAA,OAAO,SAAS,CAAC;AACnB;;;;"}

package/dist/esm/index.js

@@ -1,10 +1,12 @@
 import { useState, useCallback, useEffect } from 'react';
 
+/** Enumeration for axis values */
 var Axis;
 (function (Axis) {
     Axis["X"] = "x";
     Axis["Y"] = "y";
 })(Axis || (Axis = {}));
+/** Enumeration for direction values */
 var Direction;
 (function (Direction) {
     Direction["Up"] = "up";
@@ -13,12 +15,48 @@ var Direction;
     Direction["Right"] = "right";
     Direction["Still"] = "still";
 })(Direction || (Direction = {}));
+/**
+ * useDetectScroll hook.
+ *
+ * This hook provides a mechanism to detect the scroll direction.
+ * It will return the scroll direction as a string (up, down, left, right, or still) based on user scrolling.
+ *
+ * @example
+ *
+ * import useDetectScroll, { Axis, Direction } from './useDetectScroll';
+ *
+ * function App() {
+ *   const scrollDirection = useDetectScroll({
+ *     thr: 100,
+ *     axis: Axis.Y,
+ *     scrollUp: Direction.Up,
+ *     scrollDown: Direction.Down,
+ *     still: Direction.Still
+ *   });
+ *
+ *   return (
+ *     <div>
+ *       <p>Current scroll direction: {scrollDirection}</p>
+ *     </div>
+ *   );
+ * }
+ *
+ * @param {ScrollProps} props - The properties related to scrolling.
+ * @property {number} props.thr - The threshold value which the scroll difference must exceed to update scroll direction.
+ * @property {Axis} props.axis - The axis along which to detect scroll. Can be 'x' or 'y'.
+ * @property {Direction} props.scrollUp - The direction to set when scrolling up or left. By default, 'up' for y-axis and 'left' for x-axis.
+ * @property {Direction} props.scrollDown - The direction to set when scrolling down or right. By default, 'down' for y-axis and 'right' for x-axis.
+ * @property {Direction} props.still - The direction to set when there is no scrolling. By default, 'still'.
+ *
+ * @returns {Direction} - The current direction 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 [scrollDir, setScrollDir] = useState(still);
     const threshold = Math.max(0, thr);
     let ticking = false;
     let lastScroll = axis === Axis.Y ? window.scrollY : window.scrollX;
+    /** Function to update scroll direction */
     const updateScrollDir = useCallback(() => {
         const scroll = axis === Axis.Y ? window.scrollY : window.scrollX;
         if (Math.abs(scroll - lastScroll) >= threshold) {
@@ -28,6 +66,7 @@ function useDetectScroll(props) {
         ticking = false;
     }, [axis, threshold, scrollDown, scrollUp]);
     useEffect(() => {
+        /** Function to handle onScroll event */
         const onScroll = () => {
             if (!ticking) {
                 window.requestAnimationFrame(updateScrollDir);
@@ -37,7 +76,7 @@ function useDetectScroll(props) {
         window.addEventListener("scroll", onScroll);
         return () => window.removeEventListener("scroll", onScroll);
     }, [updateScrollDir]);
-    return [scrollDir];
+    return scrollDir;
 }
 
 export { useDetectScroll };

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/hooks/useDetectScroll.ts"],"sourcesContent":["import { useState, useEffect, useCallback } from \"react\";\n\nenum Axis {\n  X = \"x\",\n  Y = \"y\",\n}\n\nenum Direction {\n  Up = \"up\",\n  Down = \"down\",\n  Left = \"left\",\n  Right = \"right\",\n  Still = \"still\",\n}\n\ntype ScrollProps = {\n  thr?: number;\n  axis?: Axis;\n  scrollUp?: string;\n  scrollDown?: string;\n  still?: string;\n};\n\nfunction useDetectScroll(props: ScrollProps) {\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(still);\n\n  const threshold = Math.max(0, thr);\n  let ticking = false;\n  let lastScroll: number = axis === Axis.Y ? window.scrollY : window.scrollX;\n\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    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];\n}\n\nexport default useDetectScroll;\n"],"names":[],"mappings":";;AAEA,IAAK,IAGJ,CAAA;AAHD,CAAA,UAAK,IAAI,EAAA;AACP,IAAA,IAAA,CAAA,GAAA,CAAA,GAAA,GAAO,CAAA;AACP,IAAA,IAAA,CAAA,GAAA,CAAA,GAAA,GAAO,CAAA;AACT,CAAC,EAHI,IAAI,KAAJ,IAAI,GAGR,EAAA,CAAA,CAAA,CAAA;AAED,IAAK,SAMJ,CAAA;AAND,CAAA,UAAK,SAAS,EAAA;AACZ,IAAA,SAAA,CAAA,IAAA,CAAA,GAAA,IAAS,CAAA;AACT,IAAA,SAAA,CAAA,MAAA,CAAA,GAAA,MAAa,CAAA;AACb,IAAA,SAAA,CAAA,MAAA,CAAA,GAAA,MAAa,CAAA;AACb,IAAA,SAAA,CAAA,OAAA,CAAA,GAAA,OAAe,CAAA;AACf,IAAA,SAAA,CAAA,OAAA,CAAA,GAAA,OAAe,CAAA;AACjB,CAAC,EANI,SAAS,KAAT,SAAS,GAMb,EAAA,CAAA,CAAA,CAAA;AAUD,SAAS,eAAe,CAAC,KAAkB,EAAA;IACzC,MAAM,EACJ,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,GACxB,GAAG,KAAK,CAAC;IAEV,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAElD,MAAM,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;IACnC,IAAI,OAAO,GAAG,KAAK,CAAC;AACpB,IAAA,IAAI,UAAU,GAAW,IAAI,KAAK,IAAI,CAAC,CAAC,GAAG,MAAM,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC;AAE3E,IAAA,MAAM,eAAe,GAAG,WAAW,CAAC,MAAK;AACvC,QAAA,MAAM,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC,CAAC,GAAG,MAAM,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC;QAEjE,IAAI,IAAI,CAAC,GAAG,CAAC,MAAM,GAAG,UAAU,CAAC,IAAI,SAAS,EAAE;AAC9C,YAAA,YAAY,CAAC,MAAM,GAAG,UAAU,GAAG,UAAU,GAAG,QAAQ,CAAC,CAAC;YAC1D,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;AAClC,SAAA;QACD,OAAO,GAAG,KAAK,CAAC;KACjB,EAAE,CAAC,IAAI,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE5C,SAAS,CAAC,MAAK;QACb,MAAM,QAAQ,GAAG,MAAK;YACpB,IAAI,CAAC,OAAO,EAAE;AACZ,gBAAA,MAAM,CAAC,qBAAqB,CAAC,eAAe,CAAC,CAAC;gBAC9C,OAAO,GAAG,IAAI,CAAC;AAChB,aAAA;AACH,SAAC,CAAC;AAEF,QAAA,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;QAE5C,OAAO,MAAM,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;AAC9D,KAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;IAEtB,OAAO,CAAC,SAAS,CAAC,CAAC;AACrB;;;;"}
+{"version":3,"file":"index.js","sources":["../../src/hooks/useDetectScroll.ts"],"sourcesContent":["import { useState, useEffect, useCallback } from \"react\";\n\n/** Enumeration for axis values */\nenum Axis {\n  X = \"x\",\n  Y = \"y\",\n}\n\n/** Enumeration for direction values */\nenum Direction {\n  Up = \"up\",\n  Down = \"down\",\n  Left = \"left\",\n  Right = \"right\",\n  Still = \"still\",\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.\n * It will return the scroll direction as a string (up, down, left, right, or still) based on user scrolling.\n *\n * @example\n *\n * import useDetectScroll, { Axis, Direction } from './useDetectScroll';\n *\n * function App() {\n *   const scrollDirection = 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: {scrollDirection}</p>\n *     </div>\n *   );\n * }\n *\n * @param {ScrollProps} props - The properties related to scrolling.\n * @property {number} props.thr - The threshold value which the scroll difference must exceed to update scroll direction.\n * @property {Axis} props.axis - The axis along which to detect scroll. Can be 'x' or 'y'.\n * @property {Direction} props.scrollUp - The direction to set when scrolling up or left. By default, 'up' for y-axis and 'left' for x-axis.\n * @property {Direction} props.scrollDown - The direction to set when scrolling down or right. By default, 'down' for y-axis and 'right' for x-axis.\n * @property {Direction} props.still - The direction to set when there is no scrolling. By default, 'still'.\n *\n * @returns {Direction} - The current direction of scrolling.\n */\nfunction useDetectScroll(props: ScrollProps): Direction {\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\n  const threshold = Math.max(0, thr);\n  let ticking = false;\n  let lastScroll: number = axis === Axis.Y ? window.scrollY : window.scrollX;\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 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;\n}\n\nexport default useDetectScroll;\n"],"names":[],"mappings":";;AAEA;AACA,IAAK,IAGJ,CAAA;AAHD,CAAA,UAAK,IAAI,EAAA;AACP,IAAA,IAAA,CAAA,GAAA,CAAA,GAAA,GAAO,CAAA;AACP,IAAA,IAAA,CAAA,GAAA,CAAA,GAAA,GAAO,CAAA;AACT,CAAC,EAHI,IAAI,KAAJ,IAAI,GAGR,EAAA,CAAA,CAAA,CAAA;AAED;AACA,IAAK,SAMJ,CAAA;AAND,CAAA,UAAK,SAAS,EAAA;AACZ,IAAA,SAAA,CAAA,IAAA,CAAA,GAAA,IAAS,CAAA;AACT,IAAA,SAAA,CAAA,MAAA,CAAA,GAAA,MAAa,CAAA;AACb,IAAA,SAAA,CAAA,MAAA,CAAA,GAAA,MAAa,CAAA;AACb,IAAA,SAAA,CAAA,OAAA,CAAA,GAAA,OAAe,CAAA;AACf,IAAA,SAAA,CAAA,OAAA,CAAA,GAAA,OAAe,CAAA;AACjB,CAAC,EANI,SAAS,KAAT,SAAS,GAMb,EAAA,CAAA,CAAA,CAAA;AAWD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCG;AACH,SAAS,eAAe,CAAC,KAAkB,EAAA;IACzC,MAAM,EACJ,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,GACxB,GAAG,KAAK,CAAC;IAEV,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAY,KAAK,CAAC,CAAC;IAE7D,MAAM,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;IACnC,IAAI,OAAO,GAAG,KAAK,CAAC;AACpB,IAAA,IAAI,UAAU,GAAW,IAAI,KAAK,IAAI,CAAC,CAAC,GAAG,MAAM,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC;;AAG3E,IAAA,MAAM,eAAe,GAAG,WAAW,CAAC,MAAK;AACvC,QAAA,MAAM,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC,CAAC,GAAG,MAAM,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC;QAEjE,IAAI,IAAI,CAAC,GAAG,CAAC,MAAM,GAAG,UAAU,CAAC,IAAI,SAAS,EAAE;AAC9C,YAAA,YAAY,CAAC,MAAM,GAAG,UAAU,GAAG,UAAU,GAAG,QAAQ,CAAC,CAAC;YAC1D,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;AAClC,SAAA;QACD,OAAO,GAAG,KAAK,CAAC;KACjB,EAAE,CAAC,IAAI,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE5C,SAAS,CAAC,MAAK;;QAEb,MAAM,QAAQ,GAAG,MAAK;YACpB,IAAI,CAAC,OAAO,EAAE;AACZ,gBAAA,MAAM,CAAC,qBAAqB,CAAC,eAAe,CAAC,CAAC;gBAC9C,OAAO,GAAG,IAAI,CAAC;AAChB,aAAA;AACH,SAAC,CAAC;AAEF,QAAA,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;QAE5C,OAAO,MAAM,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;AAC9D,KAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;AAEtB,IAAA,OAAO,SAAS,CAAC;AACnB;;;;"}

package/package.json

@@ -35,6 +35,7 @@
     "SMAKSS",
     "CommonJS",
     "EcmaScript",
+    "TypeScript",
     "detect scroll in react",
     "react scroll",
     "scroll direction"
@@ -56,5 +57,5 @@
     "lint:fix": "eslint src/**/*.ts --fix"
   },
   "type": "module",
-  "version": "1.1.0-beta"
+  "version": "2.0.0"
 }