@smakss/react-scroll-direction 4.3.0-develop.2 → 4.3.0-develop.4

package/Readme.md

@@ -3,7 +3,7 @@
 ![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/packagephobia/install/@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

package/dist/index.d.ts

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

package/dist/index.js.map

@@ -1 +1 @@
-{"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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"}
+{"version":3,"file":"index.js","sources":["../src/useDetectScroll.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 {\n    Axis,\n    Direction,\n    ScrollInfo,\n    ScrollPosition,\n    ScrollProps,\n} from './useDetectScroll.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/useDetectScroll.d.ts

@@ -1,4 +1,4 @@
-import { ScrollInfo, ScrollProps } from './types';
+import { ScrollInfo, ScrollProps } from './useDetectScroll.types';
 /**
  * useDetectScroll hook.
  *

package/dist/useDetectScroll.test.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -13,21 +13,27 @@
     "@semantic-release/github": "^12.0.3",
     "@semantic-release/npm": "^13.1.3",
     "@semantic-release/release-notes-generator": "^14.1.0",
+    "@testing-library/react": "^16.3.0",
     "@types/react": "^19.2.10",
     "@typescript-eslint/eslint-plugin": "^8.54.0",
     "@typescript-eslint/parser": "^8.54.0",
+    "@vitest/coverage-v8": "^2.1.9",
     "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",
+    "jsdom": "^27.4.0",
     "lint-staged": "^16.2.7",
     "prettier": "^3.8.1",
     "prettier-plugin-organize-imports": "^4.3.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
     "semantic-release": "^25.0.3",
     "typescript": "^5.9.3",
-    "vite": "^6.4.1",
-    "vite-plugin-dts": "^4.5.4"
+    "vite": "^7.3.1",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^2.1.9"
   },
   "engines": {
     "node": ">=22.14.0"
@@ -92,6 +98,9 @@
     "prepare": "if [ \"$NODE_ENV\" != \"production\" ]; then husky; fi",
     "setup": "pnpm install && husky",
     "release": "semantic-release",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
     "typecheck:main": "tsc -b .",
     "typecheck:playground": "pnpm build && pnpm -C playground exec tsc -p tsconfig.json",
     "typecheck": "pnpm typecheck:main && pnpm typecheck:playground",
@@ -99,5 +108,5 @@
   },
   "type": "module",
   "types": "./dist/index.d.ts",
-  "version": "4.3.0-develop.2"
+  "version": "4.3.0-develop.4"
 }