@smakss/react-scroll-direction 4.0.1 → 4.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -0
- package/package.json +2 -1
package/dist/index.js
CHANGED
|
@@ -100,4 +100,4 @@ function useDetectScroll(props = {}) {
|
|
|
100
100
|
}
|
|
101
101
|
|
|
102
102
|
export { Axis, Direction, useDetectScroll as default };
|
|
103
|
-
//# sourceMappingURL=
|
|
103
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../src/index.ts"],"sourcesContent":["import { useState, useEffect, useCallback } from 'react';\n\n/** Enumeration for axis values */\nexport enum Axis {\n X = 'x',\n Y = 'y'\n}\n\n/** Enumeration for direction values */\nexport enum Direction {\n Up = 'up',\n Down = 'down',\n Left = 'left',\n Right = 'right',\n Still = 'still'\n}\n\ntype ScrollPosition = {\n top: number;\n bottom: number;\n left: number;\n right: number;\n};\n\n/** Type declaration for the returned scroll information */\ntype ScrollInfo = {\n scrollDir: Direction;\n scrollPosition: ScrollPosition;\n};\n\n/** Type declaration for scroll properties */\ntype ScrollProps = {\n thr?: number;\n axis?: Axis;\n scrollUp?: Direction;\n scrollDown?: Direction;\n still?: Direction;\n};\n\n/**\n * useDetectScroll hook.\n *\n * This hook provides a mechanism to detect the scroll direction and position.\n * It will return the scroll direction as a string (up, down, left, right, or still) based on user scrolling,\n * as well as the scroll position from the top, bottom, left, and right edges of the page.\n *\n * @example\n *\n * import useDetectScroll, { Axis, Direction } from '@smakss/react-scroll-direction';\n *\n * function App() {\n * const { scrollDir, scrollPosition } = useDetectScroll({\n * thr: 100,\n * axis: Axis.Y,\n * scrollUp: Direction.Up,\n * scrollDown: Direction.Down,\n * still: Direction.Still\n * });\n *\n * return (\n * <div>\n * <p>Current scroll direction: {scrollDir}</p>\n * <p>Scroll position - Top: {scrollPosition.top}, Bottom: {scrollPosition.bottom},\n * Left: {scrollPosition.left}, Right: {scrollPosition.right}</p>\n * </div>\n * );\n * }\n *\n * @param {ScrollProps} props - The properties related to scrolling.\n * @returns {ScrollInfo} - The current direction and position of scrolling.\n */\nfunction useDetectScroll(props: ScrollProps = {}): ScrollInfo {\n const {\n thr = 0,\n axis = Axis.Y,\n scrollUp = axis === Axis.Y ? Direction.Up : Direction.Left,\n scrollDown = axis === Axis.Y ? Direction.Down : Direction.Right,\n still = Direction.Still\n } = props;\n\n const [scrollDir, setScrollDir] = useState<Direction>(still);\n const [scrollPosition, setScrollPosition] = useState<ScrollPosition>({\n top: 0,\n bottom: 0,\n left: 0,\n right: 0\n });\n\n const threshold = Math.max(0, thr);\n let ticking = false;\n let lastScroll = 0;\n\n /** Function to update scroll direction */\n const updateScrollDir = useCallback(() => {\n const scroll = axis === Axis.Y ? window.scrollY : window.scrollX;\n\n if (Math.abs(scroll - lastScroll) >= threshold) {\n setScrollDir(scroll > lastScroll ? scrollDown : scrollUp);\n lastScroll = Math.max(0, scroll);\n }\n ticking = false;\n }, [axis, threshold, scrollDown, scrollUp]);\n\n useEffect(() => {\n /** Function to update scroll position */\n const updateScrollPosition = () => {\n const top = window.scrollY;\n const left = window.scrollX;\n const bottom =\n document.documentElement.scrollHeight - window.innerHeight - top;\n const right =\n document.documentElement.scrollWidth - window.innerWidth - left;\n\n setScrollPosition({ top, bottom, left, right });\n };\n\n /** Call the update function when the component mounts */\n updateScrollPosition();\n\n window.addEventListener('scroll', updateScrollPosition);\n\n return () => {\n window.removeEventListener('scroll', updateScrollPosition);\n };\n }, []);\n\n useEffect(() => {\n lastScroll = axis === Axis.Y ? window.scrollY : window.scrollX;\n\n /** Function to handle onScroll event */\n const onScroll = () => {\n if (!ticking) {\n window.requestAnimationFrame(updateScrollDir);\n ticking = true;\n }\n };\n\n window.addEventListener('scroll', onScroll);\n\n return () => window.removeEventListener('scroll', onScroll);\n }, [updateScrollDir]);\n\n return { scrollDir, scrollPosition };\n}\n\nexport default useDetectScroll;\n"],"names":[],"mappings":"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"}
|