@smakss/react-scroll-direction 3.1.0-beta.1 → 3.1.1

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.
Files changed (7) hide show
  1. package/dist/cjs/index.d.ts +58 -0
  2. package/dist/cjs/index.js +88 -0
  3. package/dist/cjs/index.js.map +1 -0
  4. package/dist/esm/index.d.ts +58 -0
  5. package/dist/esm/index.js +84 -0
  6. package/dist/esm/index.js.map +1 -0
  7. package/package.json +7 -22
package/dist/cjs/index.d.ts ADDED
@@ -0,0 +1,58 @@
1
+ /** Enumeration for axis values */
2
+ export declare enum Axis {
3
+ X = "x",
4
+ Y = "y"
5
+ }
6
+ /** Enumeration for direction values */
7
+ export declare enum Direction {
8
+ Up = "up",
9
+ Down = "down",
10
+ Left = "left",
11
+ Right = "right",
12
+ Still = "still"
13
+ }
14
+ /** Type declaration for scroll properties */
15
+ type ScrollProps = {
16
+ thr?: number;
17
+ axis?: Axis;
18
+ scrollUp?: Direction;
19
+ scrollDown?: Direction;
20
+ still?: Direction;
21
+ };
22
+ /**
23
+ * useDetectScroll hook.
24
+ *
25
+ * This hook provides a mechanism to detect the scroll direction.
26
+ * It will return the scroll direction as a string (up, down, left, right, or still) based on user scrolling.
27
+ *
28
+ * @example
29
+ *
30
+ * import useDetectScroll, { Axis, Direction } from '@smakss/react-scroll-direction';
31
+ *
32
+ * function App() {
33
+ * const scrollDirection = useDetectScroll({
34
+ * thr: 100,
35
+ * axis: Axis.Y,
36
+ * scrollUp: Direction.Up,
37
+ * scrollDown: Direction.Down,
38
+ * still: Direction.Still
39
+ * });
40
+ *
41
+ * return (
42
+ * <div>
43
+ * <p>Current scroll direction: {scrollDirection}</p>
44
+ * </div>
45
+ * );
46
+ * }
47
+ *
48
+ * @param {ScrollProps} props - The properties related to scrolling.
49
+ * @property {number} props.thr - The threshold value which the scroll difference must exceed to update scroll direction.
50
+ * @property {Axis} props.axis - The axis along which to detect scroll. Can be 'x' or 'y'.
51
+ * @property {Direction} props.scrollUp - The direction to set when scrolling up or left. By default, 'up' for y-axis and 'left' for x-axis.
52
+ * @property {Direction} props.scrollDown - The direction to set when scrolling down or right. By default, 'down' for y-axis and 'right' for x-axis.
53
+ * @property {Direction} props.still - The direction to set when there is no scrolling. By default, 'still'.
54
+ *
55
+ * @returns {Direction} - The current direction of scrolling.
56
+ */
57
+ declare function useDetectScroll(props?: ScrollProps): Direction;
58
+ export default useDetectScroll;
package/dist/cjs/index.js ADDED
@@ -0,0 +1,88 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var react = require('react');
6
+
7
+ /** Enumeration for axis values */
8
+ exports.Axis = void 0;
9
+ (function (Axis) {
10
+ Axis["X"] = "x";
11
+ Axis["Y"] = "y";
12
+ })(exports.Axis || (exports.Axis = {}));
13
+ /** Enumeration for direction values */
14
+ exports.Direction = void 0;
15
+ (function (Direction) {
16
+ Direction["Up"] = "up";
17
+ Direction["Down"] = "down";
18
+ Direction["Left"] = "left";
19
+ Direction["Right"] = "right";
20
+ Direction["Still"] = "still";
21
+ })(exports.Direction || (exports.Direction = {}));
22
+ /**
23
+ * useDetectScroll hook.
24
+ *
25
+ * This hook provides a mechanism to detect the scroll direction.
26
+ * It will return the scroll direction as a string (up, down, left, right, or still) based on user scrolling.
27
+ *
28
+ * @example
29
+ *
30
+ * import useDetectScroll, { Axis, Direction } from '@smakss/react-scroll-direction';
31
+ *
32
+ * function App() {
33
+ * const scrollDirection = useDetectScroll({
34
+ * thr: 100,
35
+ * axis: Axis.Y,
36
+ * scrollUp: Direction.Up,
37
+ * scrollDown: Direction.Down,
38
+ * still: Direction.Still
39
+ * });
40
+ *
41
+ * return (
42
+ * <div>
43
+ * <p>Current scroll direction: {scrollDirection}</p>
44
+ * </div>
45
+ * );
46
+ * }
47
+ *
48
+ * @param {ScrollProps} props - The properties related to scrolling.
49
+ * @property {number} props.thr - The threshold value which the scroll difference must exceed to update scroll direction.
50
+ * @property {Axis} props.axis - The axis along which to detect scroll. Can be 'x' or 'y'.
51
+ * @property {Direction} props.scrollUp - The direction to set when scrolling up or left. By default, 'up' for y-axis and 'left' for x-axis.
52
+ * @property {Direction} props.scrollDown - The direction to set when scrolling down or right. By default, 'down' for y-axis and 'right' for x-axis.
53
+ * @property {Direction} props.still - The direction to set when there is no scrolling. By default, 'still'.
54
+ *
55
+ * @returns {Direction} - The current direction of scrolling.
56
+ */
57
+ function useDetectScroll(props = {}) {
58
+ 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;
59
+ const [scrollDir, setScrollDir] = react.useState(still);
60
+ const threshold = Math.max(0, thr);
61
+ let ticking = false;
62
+ let lastScroll = 0;
63
+ /** Function to update scroll direction */
64
+ const updateScrollDir = react.useCallback(() => {
65
+ const scroll = axis === exports.Axis.Y ? window.scrollY : window.scrollX;
66
+ if (Math.abs(scroll - lastScroll) >= threshold) {
67
+ setScrollDir(scroll > lastScroll ? scrollDown : scrollUp);
68
+ lastScroll = Math.max(0, scroll);
69
+ }
70
+ ticking = false;
71
+ }, [axis, threshold, scrollDown, scrollUp]);
72
+ react.useEffect(() => {
73
+ lastScroll = axis === exports.Axis.Y ? window.scrollY : window.scrollX;
74
+ /** Function to handle onScroll event */
75
+ const onScroll = () => {
76
+ if (!ticking) {
77
+ window.requestAnimationFrame(updateScrollDir);
78
+ ticking = true;
79
+ }
80
+ };
81
+ window.addEventListener("scroll", onScroll);
82
+ return () => window.removeEventListener("scroll", onScroll);
83
+ }, [updateScrollDir]);
84
+ return scrollDir;
85
+ }
86
+
87
+ exports.default = useDetectScroll;
88
+ //# sourceMappingURL=index.js.map
package/dist/cjs/index.js.map ADDED
@@ -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\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.\n * It will return the scroll direction as a string (up, down, left, right, or still) based on user scrolling.\n *\n * @example\n *\n * import useDetectScroll, { Axis, Direction } from '@smakss/react-scroll-direction';\n *\n * function App() {\n * const scrollDirection = 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: {scrollDirection}</p>\n * </div>\n * );\n * }\n *\n * @param {ScrollProps} props - The properties related to scrolling.\n * @property {number} props.thr - The threshold value which the scroll difference must exceed to update scroll direction.\n * @property {Axis} props.axis - The axis along which to detect scroll. Can be 'x' or 'y'.\n * @property {Direction} props.scrollUp - The direction to set when scrolling up or left. By default, 'up' for y-axis and 'left' for x-axis.\n * @property {Direction} props.scrollDown - The direction to set when scrolling down or right. By default, 'down' for y-axis and 'right' for x-axis.\n * @property {Direction} props.still - The direction to set when there is no scrolling. By default, 'still'.\n *\n * @returns {Direction} - The current direction of scrolling.\n */\nfunction useDetectScroll(props: ScrollProps = {}): Direction {\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\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 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;\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;AAWD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCG;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,GACxB,GAAG,KAAK,CAAC;IAEV,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAGC,cAAQ,CAAY,KAAK,CAAC,CAAC;IAE7D,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;AAClC,SAAA;QACD,OAAO,GAAG,KAAK,CAAC;KACjB,EAAE,CAAC,IAAI,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE5CI,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,aAAA;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,SAAS,CAAC;AACnB;;;;"}
package/dist/esm/index.d.ts ADDED
@@ -0,0 +1,58 @@
1
+ /** Enumeration for axis values */
2
+ export declare enum Axis {
3
+ X = "x",
4
+ Y = "y"
5
+ }
6
+ /** Enumeration for direction values */
7
+ export declare enum Direction {
8
+ Up = "up",
9
+ Down = "down",
10
+ Left = "left",
11
+ Right = "right",
12
+ Still = "still"
13
+ }
14
+ /** Type declaration for scroll properties */
15
+ type ScrollProps = {
16
+ thr?: number;
17
+ axis?: Axis;
18
+ scrollUp?: Direction;
19
+ scrollDown?: Direction;
20
+ still?: Direction;
21
+ };
22
+ /**
23
+ * useDetectScroll hook.
24
+ *
25
+ * This hook provides a mechanism to detect the scroll direction.
26
+ * It will return the scroll direction as a string (up, down, left, right, or still) based on user scrolling.
27
+ *
28
+ * @example
29
+ *
30
+ * import useDetectScroll, { Axis, Direction } from '@smakss/react-scroll-direction';
31
+ *
32
+ * function App() {
33
+ * const scrollDirection = useDetectScroll({
34
+ * thr: 100,
35
+ * axis: Axis.Y,
36
+ * scrollUp: Direction.Up,
37
+ * scrollDown: Direction.Down,
38
+ * still: Direction.Still
39
+ * });
40
+ *
41
+ * return (
42
+ * <div>
43
+ * <p>Current scroll direction: {scrollDirection}</p>
44
+ * </div>
45
+ * );
46
+ * }
47
+ *
48
+ * @param {ScrollProps} props - The properties related to scrolling.
49
+ * @property {number} props.thr - The threshold value which the scroll difference must exceed to update scroll direction.
50
+ * @property {Axis} props.axis - The axis along which to detect scroll. Can be 'x' or 'y'.
51
+ * @property {Direction} props.scrollUp - The direction to set when scrolling up or left. By default, 'up' for y-axis and 'left' for x-axis.
52
+ * @property {Direction} props.scrollDown - The direction to set when scrolling down or right. By default, 'down' for y-axis and 'right' for x-axis.
53
+ * @property {Direction} props.still - The direction to set when there is no scrolling. By default, 'still'.
54
+ *
55
+ * @returns {Direction} - The current direction of scrolling.
56
+ */
57
+ declare function useDetectScroll(props?: ScrollProps): Direction;
58
+ export default useDetectScroll;
package/dist/esm/index.js ADDED
@@ -0,0 +1,84 @@
1
+ import { useState, useCallback, useEffect } from 'react';
2
+
3
+ /** Enumeration for axis values */
4
+ var Axis;
5
+ (function (Axis) {
6
+ Axis["X"] = "x";
7
+ Axis["Y"] = "y";
8
+ })(Axis || (Axis = {}));
9
+ /** Enumeration for direction values */
10
+ var Direction;
11
+ (function (Direction) {
12
+ Direction["Up"] = "up";
13
+ Direction["Down"] = "down";
14
+ Direction["Left"] = "left";
15
+ Direction["Right"] = "right";
16
+ Direction["Still"] = "still";
17
+ })(Direction || (Direction = {}));
18
+ /**
19
+ * useDetectScroll hook.
20
+ *
21
+ * This hook provides a mechanism to detect the scroll direction.
22
+ * It will return the scroll direction as a string (up, down, left, right, or still) based on user scrolling.
23
+ *
24
+ * @example
25
+ *
26
+ * import useDetectScroll, { Axis, Direction } from '@smakss/react-scroll-direction';
27
+ *
28
+ * function App() {
29
+ * const scrollDirection = useDetectScroll({
30
+ * thr: 100,
31
+ * axis: Axis.Y,
32
+ * scrollUp: Direction.Up,
33
+ * scrollDown: Direction.Down,
34
+ * still: Direction.Still
35
+ * });
36
+ *
37
+ * return (
38
+ * <div>
39
+ * <p>Current scroll direction: {scrollDirection}</p>
40
+ * </div>
41
+ * );
42
+ * }
43
+ *
44
+ * @param {ScrollProps} props - The properties related to scrolling.
45
+ * @property {number} props.thr - The threshold value which the scroll difference must exceed to update scroll direction.
46
+ * @property {Axis} props.axis - The axis along which to detect scroll. Can be 'x' or 'y'.
47
+ * @property {Direction} props.scrollUp - The direction to set when scrolling up or left. By default, 'up' for y-axis and 'left' for x-axis.
48
+ * @property {Direction} props.scrollDown - The direction to set when scrolling down or right. By default, 'down' for y-axis and 'right' for x-axis.
49
+ * @property {Direction} props.still - The direction to set when there is no scrolling. By default, 'still'.
50
+ *
51
+ * @returns {Direction} - The current direction of scrolling.
52
+ */
53
+ function useDetectScroll(props = {}) {
54
+ const { thr = 0, axis = Axis.Y, scrollUp = axis === Axis.Y ? Direction.Up : Direction.Left, scrollDown = axis === Axis.Y ? Direction.Down : Direction.Right, still = Direction.Still, } = props;
55
+ const [scrollDir, setScrollDir] = useState(still);
56
+ const threshold = Math.max(0, thr);
57
+ let ticking = false;
58
+ let lastScroll = 0;
59
+ /** Function to update scroll direction */
60
+ const updateScrollDir = useCallback(() => {
61
+ const scroll = axis === Axis.Y ? window.scrollY : window.scrollX;
62
+ if (Math.abs(scroll - lastScroll) >= threshold) {
63
+ setScrollDir(scroll > lastScroll ? scrollDown : scrollUp);
64
+ lastScroll = Math.max(0, scroll);
65
+ }
66
+ ticking = false;
67
+ }, [axis, threshold, scrollDown, scrollUp]);
68
+ useEffect(() => {
69
+ lastScroll = axis === Axis.Y ? window.scrollY : window.scrollX;
70
+ /** Function to handle onScroll event */
71
+ const onScroll = () => {
72
+ if (!ticking) {
73
+ window.requestAnimationFrame(updateScrollDir);
74
+ ticking = true;
75
+ }
76
+ };
77
+ window.addEventListener("scroll", onScroll);
78
+ return () => window.removeEventListener("scroll", onScroll);
79
+ }, [updateScrollDir]);
80
+ return scrollDir;
81
+ }
82
+
83
+ export { Axis, Direction, useDetectScroll as default };
84
+ //# sourceMappingURL=index.js.map
package/dist/esm/index.js.map ADDED
@@ -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\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.\n * It will return the scroll direction as a string (up, down, left, right, or still) based on user scrolling.\n *\n * @example\n *\n * import useDetectScroll, { Axis, Direction } from '@smakss/react-scroll-direction';\n *\n * function App() {\n * const scrollDirection = 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: {scrollDirection}</p>\n * </div>\n * );\n * }\n *\n * @param {ScrollProps} props - The properties related to scrolling.\n * @property {number} props.thr - The threshold value which the scroll difference must exceed to update scroll direction.\n * @property {Axis} props.axis - The axis along which to detect scroll. Can be 'x' or 'y'.\n * @property {Direction} props.scrollUp - The direction to set when scrolling up or left. By default, 'up' for y-axis and 'left' for x-axis.\n * @property {Direction} props.scrollDown - The direction to set when scrolling down or right. By default, 'down' for y-axis and 'right' for x-axis.\n * @property {Direction} props.still - The direction to set when there is no scrolling. By default, 'still'.\n *\n * @returns {Direction} - The current direction of scrolling.\n */\nfunction useDetectScroll(props: ScrollProps = {}): Direction {\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\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 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;\n}\n\nexport default useDetectScroll;\n"],"names":[],"mappings":";;AAEA;IACY,KAGX;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,EAHW,IAAI,KAAJ,IAAI,GAGf,EAAA,CAAA,CAAA,CAAA;AAED;IACY,UAMX;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,EANW,SAAS,KAAT,SAAS,GAMpB,EAAA,CAAA,CAAA,CAAA;AAWD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCG;AACH,SAAS,eAAe,CAAC,KAAA,GAAqB,EAAE,EAAA;IAC9C,MAAM,EACJ,GAAG,GAAG,CAAC,EACP,IAAI,GAAG,IAAI,CAAC,CAAC,EACb,QAAQ,GAAG,IAAI,KAAK,IAAI,CAAC,CAAC,GAAG,SAAS,CAAC,EAAE,GAAG,SAAS,CAAC,IAAI,EAC1D,UAAU,GAAG,IAAI,KAAK,IAAI,CAAC,CAAC,GAAG,SAAS,CAAC,IAAI,GAAG,SAAS,CAAC,KAAK,EAC/D,KAAK,GAAG,SAAS,CAAC,KAAK,GACxB,GAAG,KAAK,CAAC;IAEV,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAY,KAAK,CAAC,CAAC;IAE7D,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,GAAG,WAAW,CAAC,MAAK;AACvC,QAAA,MAAM,MAAM,GAAG,IAAI,KAAK,IAAI,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;AAClC,SAAA;QACD,OAAO,GAAG,KAAK,CAAC;KACjB,EAAE,CAAC,IAAI,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE5C,SAAS,CAAC,MAAK;AACb,QAAA,UAAU,GAAG,IAAI,KAAK,IAAI,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,aAAA;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,SAAS,CAAC;AACnB;;;;"}
package/package.json CHANGED
@@ -22,31 +22,16 @@
22
22
  "rollup": "^4.2.0",
23
23
  "typescript": "^5.0.4"
24
24
  },
25
+ "engines": {
26
+ "node": ">=18.0.0"
27
+ },
25
28
  "exports": {
26
29
  "import": "./dist/esm/index.js",
27
30
  "require": "./dist/cjs/index.js"
28
31
  },
29
- "files": [
30
- "dist"
31
- ],
32
+ "files": ["dist"],
32
33
  "homepage": "https://github.com/SMAKSS/react-scroll-direction#readme",
33
- "keywords": [
34
- "npm",
35
- "yarn",
36
- "react",
37
- "remix",
38
- "nextjs",
39
- "gatsby",
40
- "scroll",
41
- "direction",
42
- "SMAKSS",
43
- "CommonJS",
44
- "EcmaScript",
45
- "TypeScript",
46
- "detect scroll in react",
47
- "react scroll",
48
- "scroll direction"
49
- ],
34
+ "keywords": ["npm", "yarn", "react", "remix", "nextjs", "gatsby", "scroll", "direction", "SMAKSS", "CommonJS", "EcmaScript", "TypeScript", "detect scroll in react", "react scroll", "scroll direction"],
50
35
  "license": "MIT",
51
36
  "main": "dist/cjs/index.js",
52
37
  "module": "dist/esm/index.js",
@@ -68,5 +53,5 @@
68
53
  "typecheck": "tsc -b ."
69
54
  },
70
55
  "type": "module",
71
- "version": "3.1.0-beta.1"
72
- }
56
+ "version": "3.1.1"
57
+ }