@smakss/react-scroll-direction 4.0.0-beta.0 → 4.0.0

package/Readme.md

@@ -2,13 +2,13 @@
 
 ![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 detects scroll direction in your application with ease. You can fine-tune its sensitivity using an adjustable threshold, catering to your application's unique needs.
+`@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.
 
-This package originated from a [popular StackOverflow response](https://stackoverflow.com/a/62497293/11908502) and has been developed further into a ready-to-implement solution for managing scroll direction detection 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 `@smakss/react-scroll-direction` in action 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)
 
@@ -24,12 +24,6 @@ yarn add @smakss/react-scroll-direction
 
 Then, import it into your project:
 
-CommonJS:
-
-```js
-const useDetectScroll = require('@smakss/react-scroll-direction');
-```
-
 ES Module:
 
 ```js
@@ -47,7 +41,7 @@ import useDetectScroll, {
 
 ## Usage
 
-The `useDetectScroll` hook takes an options object that can include the following properties:
+The `useDetectScroll` hook takes an options object with the following properties:
 
 - `thr`: Threshold for scroll direction change detection (default: `0`, accepts only positive values).
 - `axis`: Defines the scroll axis (`"y"` or `"x"`, default: `"y"`).
@@ -55,22 +49,29 @@ The `useDetectScroll` hook takes an options object that can include the followin
 - `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.
+
 ## Examples
 
-To detect upward or downward scroll:
+To detect both scroll direction and position:
 
 ```js
-const scrollDir = useDetectScroll();
+const { scrollDir, scrollPosition } = useDetectScroll();
 
-// Returns: "up", "down", or "still"
+// scrollDir: "up", "down", "left", "right", or "still"
+// scrollPosition: { top, bottom, left, right }
 ```
 
-To detect left or right scroll:
+To customize for horizontal scroll:
 
 ```js
-const scrollDir = useDetectScroll({ axis: 'x' });
+const { scrollDir, scrollPosition } = useDetectScroll({ axis: Axis.X });
 
-// Returns: "left", "right", or "still"
+// scrollDir: "left", "right", or "still"
+// scrollPosition: { top, bottom, left, right }
 ```
 
 ## Contributing

package/package.json

@@ -3,11 +3,10 @@
   "bugs": {
     "url": "https://github.com/SMAKSS/react-scroll-direction/issues"
   },
-  "description": "Effortlessly detect scroll direction in React apps with @smakss/react-scroll-direction. Perfect for React, Remix, Next.js, and Gatsby projects, offering adjustable sensitivity.",
+  "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.4.3",
     "@commitlint/config-conventional": "^18.4.3",
-    "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-typescript": "^11.1.5",
     "@types/react": "^18.2.46",
@@ -35,9 +34,13 @@
   "homepage": "https://github.com/SMAKSS/react-scroll-direction#readme",
   "keywords": [
     "react-scroll-direction",
+    "scroll-position-react",
+    "react-hook-scroll-position",
     "scroll-detection-react",
+    "scroll-position-detection",
+    "scroll-direction-detection",
     "react-hook-scroll",
-    "direction-detection",
+    "direction-and-position-detection",
     "scroll-hook",
     "npm",
     "yarn",
@@ -47,12 +50,13 @@
     "gatsby",
     "scroll",
     "direction",
+    "position",
     "SMAKSS",
-    "CommonJS",
     "EcmaScript",
     "TypeScript",
     "detect scroll in react",
-    "react scroll"
+    "react scroll position",
+    "react scroll direction and position"
   ],
   "license": "MIT",
   "main": "dist/cjs/index.js",
@@ -75,5 +79,5 @@
     "typecheck": "tsc -b ."
   },
   "type": "module",
-  "version": "4.0.0-beta.0"
+  "version": "4.0.0"
 }

package/dist/cjs/index.d.ts

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

package/dist/cjs/index.js

@@ -1,107 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var react = require('react');
-
-/** Enumeration for axis values */
-exports.Axis = void 0;
-(function (Axis) {
-    Axis["X"] = "x";
-    Axis["Y"] = "y";
-})(exports.Axis || (exports.Axis = {}));
-/** Enumeration for direction values */
-exports.Direction = void 0;
-(function (Direction) {
-    Direction["Up"] = "up";
-    Direction["Down"] = "down";
-    Direction["Left"] = "left";
-    Direction["Right"] = "right";
-    Direction["Still"] = "still";
-})(exports.Direction || (exports.Direction = {}));
-/**
- * useDetectScroll hook.
- *
- * This hook provides a mechanism to detect the scroll direction and position.
- * It will return the scroll direction as a string (up, down, left, right, or still) based on user scrolling,
- * as well as the scroll position from the top, bottom, left, and right edges of the page.
- *
- * @example
- *
- * import useDetectScroll, { Axis, Direction } from '@smakss/react-scroll-direction';
- *
- * function App() {
- *   const { scrollDir, scrollPosition } = useDetectScroll({
- *     thr: 100,
- *     axis: Axis.Y,
- *     scrollUp: Direction.Up,
- *     scrollDown: Direction.Down,
- *     still: Direction.Still
- *   });
- *
- *   return (
- *     <div>
- *       <p>Current scroll direction: {scrollDir}</p>
- *       <p>Scroll position - Top: {scrollPosition.top}, Bottom: {scrollPosition.bottom},
- *          Left: {scrollPosition.left}, Right: {scrollPosition.right}</p>
- *     </div>
- *   );
- * }
- *
- * @param {ScrollProps} props - The properties related to scrolling.
- * @returns {ScrollInfo} - The current direction and position of scrolling.
- */
-function useDetectScroll(props = {}) {
-    const { thr = 0, axis = exports.Axis.Y, scrollUp = axis === exports.Axis.Y ? exports.Direction.Up : exports.Direction.Left, scrollDown = axis === exports.Axis.Y ? exports.Direction.Down : exports.Direction.Right, still = exports.Direction.Still } = props;
-    const [scrollDir, setScrollDir] = react.useState(still);
-    const [scrollPosition, setScrollPosition] = react.useState({
-        top: 0,
-        bottom: 0,
-        left: 0,
-        right: 0
-    });
-    const threshold = Math.max(0, thr);
-    let ticking = false;
-    let lastScroll = 0;
-    /** Function to update scroll direction */
-    const updateScrollDir = react.useCallback(() => {
-        const scroll = axis === exports.Axis.Y ? window.scrollY : window.scrollX;
-        if (Math.abs(scroll - lastScroll) >= threshold) {
-            setScrollDir(scroll > lastScroll ? scrollDown : scrollUp);
-            lastScroll = Math.max(0, scroll);
-        }
-        ticking = false;
-    }, [axis, threshold, scrollDown, scrollUp]);
-    react.useEffect(() => {
-        /** 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;
-            setScrollPosition({ top, bottom, left, right });
-        };
-        /** Call the update function when the component mounts */
-        updateScrollPosition();
-        window.addEventListener('scroll', updateScrollPosition);
-        return () => {
-            window.removeEventListener('scroll', updateScrollPosition);
-        };
-    }, []);
-    react.useEffect(() => {
-        lastScroll = axis === exports.Axis.Y ? window.scrollY : window.scrollX;
-        /** Function to handle onScroll event */
-        const onScroll = () => {
-            if (!ticking) {
-                window.requestAnimationFrame(updateScrollDir);
-                ticking = true;
-            }
-        };
-        window.addEventListener('scroll', onScroll);
-        return () => window.removeEventListener('scroll', onScroll);
-    }, [updateScrollDir]);
-    return { scrollDir, scrollPosition };
-}
-
-exports.default = useDetectScroll;
-//# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1 +0,0 @@
-{"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":["Axis","Direction","useState","useCallback","useEffect"],"mappings":";;;;;;AAEA;AACYA,sBAGX;AAHD,CAAA,UAAY,IAAI,EAAA;AACd,IAAA,IAAA,CAAA,GAAA,CAAA,GAAA,GAAO,CAAA;AACP,IAAA,IAAA,CAAA,GAAA,CAAA,GAAA,GAAO,CAAA;AACT,CAAC,EAHWA,YAAI,KAAJA,YAAI,GAGf,EAAA,CAAA,CAAA,CAAA;AAED;AACYC,2BAMX;AAND,CAAA,UAAY,SAAS,EAAA;AACnB,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,EANWA,iBAAS,KAATA,iBAAS,GAMpB,EAAA,CAAA,CAAA,CAAA;AAwBD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BG;AACH,SAAS,eAAe,CAAC,KAAA,GAAqB,EAAE,EAAA;IAC9C,MAAM,EACJ,GAAG,GAAG,CAAC,EACP,IAAI,GAAGD,YAAI,CAAC,CAAC,EACb,QAAQ,GAAG,IAAI,KAAKA,YAAI,CAAC,CAAC,GAAGC,iBAAS,CAAC,EAAE,GAAGA,iBAAS,CAAC,IAAI,EAC1D,UAAU,GAAG,IAAI,KAAKD,YAAI,CAAC,CAAC,GAAGC,iBAAS,CAAC,IAAI,GAAGA,iBAAS,CAAC,KAAK,EAC/D,KAAK,GAAGA,iBAAS,CAAC,KAAK,EACxB,GAAG,KAAK,CAAC;IAEV,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAGC,cAAQ,CAAY,KAAK,CAAC,CAAC;AAC7D,IAAA,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAGA,cAAQ,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;IACnC,IAAI,OAAO,GAAG,KAAK,CAAC;IACpB,IAAI,UAAU,GAAG,CAAC,CAAC;;AAGnB,IAAA,MAAM,eAAe,GAAGC,iBAAW,CAAC,MAAK;AACvC,QAAA,MAAM,MAAM,GAAG,IAAI,KAAKH,YAAI,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;SAClC;QACD,OAAO,GAAG,KAAK,CAAC;KACjB,EAAE,CAAC,IAAI,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE5CI,eAAS,CAAC,MAAK;;QAEb,MAAM,oBAAoB,GAAG,MAAK;AAChC,YAAA,MAAM,GAAG,GAAG,MAAM,CAAC,OAAO,CAAC;AAC3B,YAAA,MAAM,IAAI,GAAG,MAAM,CAAC,OAAO,CAAC;AAC5B,YAAA,MAAM,MAAM,GACV,QAAQ,CAAC,eAAe,CAAC,YAAY,GAAG,MAAM,CAAC,WAAW,GAAG,GAAG,CAAC;AACnE,YAAA,MAAM,KAAK,GACT,QAAQ,CAAC,eAAe,CAAC,WAAW,GAAG,MAAM,CAAC,UAAU,GAAG,IAAI,CAAC;YAElE,iBAAiB,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC;AAClD,SAAC,CAAC;;AAGF,QAAA,oBAAoB,EAAE,CAAC;AAEvB,QAAA,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,oBAAoB,CAAC,CAAC;AAExD,QAAA,OAAO,MAAK;AACV,YAAA,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,oBAAoB,CAAC,CAAC;AAC7D,SAAC,CAAC;KACH,EAAE,EAAE,CAAC,CAAC;IAEPA,eAAS,CAAC,MAAK;AACb,QAAA,UAAU,GAAG,IAAI,KAAKJ,YAAI,CAAC,CAAC,GAAG,MAAM,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC;;QAG/D,MAAM,QAAQ,GAAG,MAAK;YACpB,IAAI,CAAC,OAAO,EAAE;AACZ,gBAAA,MAAM,CAAC,qBAAqB,CAAC,eAAe,CAAC,CAAC;gBAC9C,OAAO,GAAG,IAAI,CAAC;aAChB;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,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;AACvC;;;;"}