feat: add the new x axis support

Author: SMAKSS

Readme.md

@@ -30,26 +30,28 @@ then to use it within your application you can do it just like below:
 
 The useDetectScroll custom hook will accept 3 input parameter:
 
-- `thr` (`Number`): A number to indicate the threshold of firing scroll direction event, which is `0` by default and it is only accept a positive numeric value. If it gets higher value the steps will be longer.
-- `up` (`string`): A string value for the output of custom hook if the scroll direction is upward. The default value is `up`.
-- `down` (`string`): A string value for the output of custom hook if the scroll direction is downward. The default value is `down`.
+- `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`.
 
 ## Examples of usage
 
-if scroll goes upward:
+### If the scroll goes upward/downward
 
 ```js
 const [scrollDir] = useDetectScroll();
 
-// scrollDir: "up"
+// scrollDir: "up"/"down"
 ```
 
-if scroll goes downward:
+### If the scroll goes left/right
 
 ```js
-const [scrollDir] = useDetectScroll();
+const [scrollDir] = useDetectScroll({ axis: "x" });
 
-// scrollDir: "down"
+// scrollDir: "left"/"right"
 ```
 
 ## Demo

package.json

@@ -46,5 +46,5 @@
     "generate": "rollup -c"
   },
   "type": "module",
-  "version": "0.0.6"
+  "version": "0.0.7"
 }

src/hooks/useDetectScroll.js

@@ -1,23 +1,38 @@
 import { useState, useEffect } from "react";
 import PropTypes from "prop-types";
 
-function useDetectScroll({ thr, up = "up", down = "down" }) {
-  const [scrollDir, setScrollDir] = useState(down);
+function useDetectScroll(props) {
+  const {
+    thr = 0,
+    axis = "y",
+    scrollUp = axis === "y" ? "up" : "left",
+    scrollDown = axis === "y" ? "down" : "right",
+    still = "still",
+  } = props;
+  const [scrollDir, setScrollDir] = useState(still);
 
   useEffect(() => {
-    const threshold = thr ? (thr > 0 ? thr : 0) : 0;
-    let lastScrollY = window.pageYOffset;
+    const threshold = thr > 0 ? thr : 0;
     let ticking = false;
+    let lastScroll = undefined;
+
+    axis === "y"
+      ? (lastScroll = window.pageYOffset)
+      : (lastScroll = window.pageXOffset);
 
     const updateScrollDir = () => {
-      const scrollY = window.pageYOffset;
+      let scroll = undefined;
+
+      axis === "y"
+        ? (scroll = window.pageYOffset)
+        : (scroll = window.pageXOffset);
 
-      if (Math.abs(scrollY - lastScrollY) < threshold) {
+      if (Math.abs(scroll - lastScroll) < threshold) {
         ticking = false;
         return;
       }
-      setScrollDir(scrollY > lastScrollY ? down : up);
-      lastScrollY = scrollY > 0 ? scrollY : 0;
+      setScrollDir(scroll > lastScroll ? scrollDown : scrollUp);
+      lastScroll = scroll > 0 ? scrollY : 0;
       ticking = false;
     };
 
@@ -40,6 +55,8 @@ export default useDetectScroll;
 
 useDetectScroll.propTypes = {
   thr: PropTypes.number,
-  up: PropTypes.string,
-  down: PropTypes.string,
+  axis: PropTypes.string,
+  scrollUp: PropTypes.string,
+  scrollDown: PropTypes.string,
+  still: PropTypes.string,
 };