@smakss/react-scroll-direction 4.2.0-beta.0 → 4.2.0-beta.1

package/dist/index.d.ts

@@ -1,46 +1,3 @@
-import { Axis, Direction, ScrollInfo, ScrollProps } from './types';
-/**
- * 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.
- */
-declare function useDetectScroll(props?: ScrollProps): ScrollInfo;
-export { Axis, Direction };
+import useDetectScroll from './useDetectScroll';
 export default useDetectScroll;
+export { Axis, Direction } from './types';

package/dist/index.js

@@ -1,6 +1,6 @@
 import { useState, useRef, useCallback, useEffect } from 'react';
 
-/** Enumeration for axis values */
+// Enumeration for axis values
 var Axis;
 (function (Axis) {
     /**
@@ -12,7 +12,7 @@ var Axis;
      */
     Axis["Y"] = "y";
 })(Axis || (Axis = {}));
-/** Enumeration for direction values */
+// Enumeration for direction values
 var Direction;
 (function (Direction) {
     /**

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/types.ts","../src/index.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\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 { Axis, Direction };\nexport default useDetectScroll;\n"],"names":[],"mappings":"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"}
+{"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":"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"}

package/dist/types.d.ts

@@ -1,4 +1,3 @@
-/** Enumeration for axis values */
 export declare enum Axis {
     /**
      * The x-axis represents the horizontal direction.
@@ -9,7 +8,6 @@ export declare enum Axis {
      */
     Y = "y"
 }
-/** Enumeration for direction values */
 export declare enum Direction {
     /**
      * The up direction represents the scroll direction moving towards the top.
@@ -50,7 +48,6 @@ export type ScrollPosition = {
      */
     right: number;
 };
-/** Type declaration for the returned scroll information */
 export type ScrollInfo = {
     /**
      * The scrollDir represents the current scroll direction.
@@ -61,7 +58,6 @@ export type ScrollInfo = {
      */
     scrollPosition: ScrollPosition;
 };
-/** Type declaration for scroll properties */
 export type ScrollProps = {
     /**
      * The target represents the scrollable element to check for scroll detection.

package/dist/useDetectScroll.d.ts

@@ -0,0 +1,45 @@
+import { ScrollInfo, ScrollProps } from './types';
+/**
+ * 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.
+ */
+declare function useDetectScroll(props?: ScrollProps): ScrollInfo;
+export default useDetectScroll;

package/package.json

@@ -80,5 +80,5 @@
   },
   "type": "module",
   "types": "./dist/index.d.ts",
-  "version": "4.2.0-beta.0"
+  "version": "4.2.0-beta.1"
 }