@smakss/react-scroll-direction 2.0.0 → 2.1.0

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/Readme.md CHANGED
@@ -2,19 +2,19 @@
2
2
 
3
3
  ![npm](https://img.shields.io/npm/v/@smakss/react-scroll-direction) ![Snyk Vulnerabilities for npm package](https://img.shields.io/snyk/vulnerabilities/npm/@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) ![npm bundle size (scoped)](https://img.shields.io/bundlephobia/min/@smakss/react-scroll-direction)
4
4
 
5
- Detect scroll direction in your React applications effortlessly using `@smakss/react-scroll-direction`, a custom React Hook with an adjustable threshold.
5
+ `@smakss/react-scroll-direction` is a versatile, lightweight React hook that detects scroll direction in your application with ease. You can fine-tune its sensitivity using an adjustable threshold, catering to your application's unique needs.
6
6
 
7
- This package was inspired by a [popular StackOverflow answer](https://stackoverflow.com/a/62497293/11908502), crafted to be a ready-to-use solution for detecting scroll direction in your React applications.
7
+ This package originated from a [popular StackOverflow response](https://stackoverflow.com/a/62497293/11908502) and has been developed further into a ready-to-implement solution for managing scroll direction detection in your React applications.
8
8
 
9
9
  ## Demo
10
10
 
11
- Click the button below to view a demo on CodeSandbox:
11
+ Experience `@smakss/react-scroll-direction` in action on CodeSandbox:
12
12
 
13
13
  [![View @smakss/search](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/react-scroll-direction-tclwvp?fontsize=14&hidenavigation=1&theme=dark)
14
14
 
15
15
  ## Installation
16
16
 
17
- Install the package using npm or yarn:
17
+ Install `@smakss/react-scroll-direction` via npm or yarn:
18
18
 
19
19
  ```bash
20
20
  npm install @smakss/react-scroll-direction
@@ -22,44 +22,53 @@ npm install @smakss/react-scroll-direction
22
22
  yarn add @smakss/react-scroll-direction
23
23
  ```
24
24
 
25
- To include it in your project, use:
25
+ Then, import it into your project:
26
26
 
27
27
  CommonJS:
28
28
 
29
29
  ```js
30
- const { useDetectScroll } = require("@smakss/react-scroll-direction");
30
+ const useDetectScroll = require("@smakss/react-scroll-direction");
31
31
  ```
32
32
 
33
33
  ES Module:
34
34
 
35
35
  ```js
36
- import { useDetectScroll } from "@smakss/react-scroll-direction";
36
+ import useDetectScroll from "@smakss/react-scroll-direction";
37
+ ```
38
+
39
+ For TypeScript projects, import the hook and its types:
40
+
41
+ ```ts
42
+ import useDetectScroll, {
43
+ Axis,
44
+ Direction,
45
+ } from "@smakss/react-scroll-direction";
37
46
  ```
38
47
 
39
48
  ## Usage
40
49
 
41
- The `useDetectScroll` custom hook accepts an options object with the following properties:
50
+ The `useDetectScroll` hook takes an options object that can include the following properties:
42
51
 
43
- - `thr`: Threshold to trigger scroll direction change (default: `0`, only accepts positive values).
44
- - `axis`: Scroll axis (`"y"` or `"x"`, default: `"y"`).
45
- - `scrollUp`: Output value when scrolling up or left (default: `"up"` for y-axis, `"left"` for x-axis).
46
- - `scrollDown`: Output value when scrolling down or right (default: `"down"` for y-axis, `"right"` for x-axis).
47
- - `still`: Output value when no scrolling is detected (default: `"still"`).
52
+ - `thr`: Threshold for scroll direction change detection (default: `0`, accepts only positive values).
53
+ - `axis`: Defines the scroll axis (`"y"` or `"x"`, default: `"y"`).
54
+ - `scrollUp`: Value returned when scrolling up (y-axis) or left (x-axis) (default: `"up"` for y-axis, `"left"` for x-axis).
55
+ - `scrollDown`: Value returned when scrolling down (y-axis) or right (x-axis) (default: `"down"` for y-axis, `"right"` for x-axis).
56
+ - `still`: Value returned when there's no scrolling activity (default: `"still"`).
48
57
 
49
58
  ## Examples
50
59
 
51
- Detecting scroll up/down:
60
+ To detect upward or downward scroll:
52
61
 
53
62
  ```js
54
63
  const scrollDir = useDetectScroll({});
55
64
 
56
- // Outputs: "up", "down", or "still"
65
+ // Returns: "up", "down", or "still"
57
66
  ```
58
67
 
59
- Detecting scroll left/right:
68
+ To detect left or right scroll:
60
69
 
61
70
  ```js
62
71
  const scrollDir = useDetectScroll({ axis: "x" });
63
72
 
64
- // Outputs: "left", "right", or "still"
73
+ // Returns: "left", "right", or "still"
65
74
  ```
package/dist/cjs/index.js CHANGED
@@ -1,22 +1,24 @@
1
1
  'use strict';
2
2
 
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
3
5
  var react = require('react');
4
6
 
5
7
  /** Enumeration for axis values */
6
- var Axis;
8
+ exports.Axis = void 0;
7
9
  (function (Axis) {
8
10
  Axis["X"] = "x";
9
11
  Axis["Y"] = "y";
10
- })(Axis || (Axis = {}));
12
+ })(exports.Axis || (exports.Axis = {}));
11
13
  /** Enumeration for direction values */
12
- var Direction;
14
+ exports.Direction = void 0;
13
15
  (function (Direction) {
14
16
  Direction["Up"] = "up";
15
17
  Direction["Down"] = "down";
16
18
  Direction["Left"] = "left";
17
19
  Direction["Right"] = "right";
18
20
  Direction["Still"] = "still";
19
- })(Direction || (Direction = {}));
21
+ })(exports.Direction || (exports.Direction = {}));
20
22
  /**
21
23
  * useDetectScroll hook.
22
24
  *
@@ -25,7 +27,7 @@ var Direction;
25
27
  *
26
28
  * @example
27
29
  *
28
- * import useDetectScroll, { Axis, Direction } from './useDetectScroll';
30
+ * import useDetectScroll, { Axis, Direction } from '@smakss/react-scroll-direction';
29
31
  *
30
32
  * function App() {
31
33
  * const scrollDirection = useDetectScroll({
@@ -53,14 +55,14 @@ var Direction;
53
55
  * @returns {Direction} - The current direction of scrolling.
54
56
  */
55
57
  function useDetectScroll(props) {
56
- 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;
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;
57
59
  const [scrollDir, setScrollDir] = react.useState(still);
58
60
  const threshold = Math.max(0, thr);
59
61
  let ticking = false;
60
- let lastScroll = axis === Axis.Y ? window.scrollY : window.scrollX;
62
+ let lastScroll = axis === exports.Axis.Y ? window.scrollY : window.scrollX;
61
63
  /** Function to update scroll direction */
62
64
  const updateScrollDir = react.useCallback(() => {
63
- const scroll = axis === Axis.Y ? window.scrollY : window.scrollX;
65
+ const scroll = axis === exports.Axis.Y ? window.scrollY : window.scrollX;
64
66
  if (Math.abs(scroll - lastScroll) >= threshold) {
65
67
  setScrollDir(scroll > lastScroll ? scrollDown : scrollUp);
66
68
  lastScroll = Math.max(0, scroll);
@@ -81,5 +83,5 @@ function useDetectScroll(props) {
81
83
  return scrollDir;
82
84
  }
83
85
 
84
- exports.useDetectScroll = useDetectScroll;
86
+ exports.default = useDetectScroll;
85
87
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../src/hooks/useDetectScroll.ts"],"sourcesContent":["import { useState, useEffect, useCallback } from \"react\";\n\n/** Enumeration for axis values */\nenum Axis {\n X = \"x\",\n Y = \"y\",\n}\n\n/** Enumeration for direction values */\nenum 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 './useDetectScroll';\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: number = axis === Axis.Y ? window.scrollY : window.scrollX;\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 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":["useState","useCallback","useEffect"],"mappings":";;;;AAEA;AACA,IAAK,IAGJ,CAAA;AAHD,CAAA,UAAK,IAAI,EAAA;AACP,IAAA,IAAA,CAAA,GAAA,CAAA,GAAA,GAAO,CAAA;AACP,IAAA,IAAA,CAAA,GAAA,CAAA,GAAA,GAAO,CAAA;AACT,CAAC,EAHI,IAAI,KAAJ,IAAI,GAGR,EAAA,CAAA,CAAA,CAAA;AAED;AACA,IAAK,SAMJ,CAAA;AAND,CAAA,UAAK,SAAS,EAAA;AACZ,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,EANI,SAAS,KAAT,SAAS,GAMb,EAAA,CAAA,CAAA,CAAA;AAWD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCG;AACH,SAAS,eAAe,CAAC,KAAkB,EAAA;IACzC,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,GAAGA,cAAQ,CAAY,KAAK,CAAC,CAAC;IAE7D,MAAM,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;IACnC,IAAI,OAAO,GAAG,KAAK,CAAC;AACpB,IAAA,IAAI,UAAU,GAAW,IAAI,KAAK,IAAI,CAAC,CAAC,GAAG,MAAM,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC;;AAG3E,IAAA,MAAM,eAAe,GAAGC,iBAAW,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;IAE5CC,eAAS,CAAC,MAAK;;QAEb,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;;;;"}
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: number = axis === Axis.Y ? window.scrollY : window.scrollX;\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 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,KAAkB,EAAA;IACzC,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;AACpB,IAAA,IAAI,UAAU,GAAW,IAAI,KAAKF,YAAI,CAAC,CAAC,GAAG,MAAM,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC;;AAG3E,IAAA,MAAM,eAAe,GAAGG,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;;QAEb,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.js CHANGED
@@ -23,7 +23,7 @@ var Direction;
23
23
  *
24
24
  * @example
25
25
  *
26
- * import useDetectScroll, { Axis, Direction } from './useDetectScroll';
26
+ * import useDetectScroll, { Axis, Direction } from '@smakss/react-scroll-direction';
27
27
  *
28
28
  * function App() {
29
29
  * const scrollDirection = useDetectScroll({
@@ -79,5 +79,5 @@ function useDetectScroll(props) {
79
79
  return scrollDir;
80
80
  }
81
81
 
82
- export { useDetectScroll };
82
+ export { Axis, Direction, useDetectScroll as default };
83
83
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../src/hooks/useDetectScroll.ts"],"sourcesContent":["import { useState, useEffect, useCallback } from \"react\";\n\n/** Enumeration for axis values */\nenum Axis {\n X = \"x\",\n Y = \"y\",\n}\n\n/** Enumeration for direction values */\nenum 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 './useDetectScroll';\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: number = axis === Axis.Y ? window.scrollY : window.scrollX;\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 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;AACA,IAAK,IAGJ,CAAA;AAHD,CAAA,UAAK,IAAI,EAAA;AACP,IAAA,IAAA,CAAA,GAAA,CAAA,GAAA,GAAO,CAAA;AACP,IAAA,IAAA,CAAA,GAAA,CAAA,GAAA,GAAO,CAAA;AACT,CAAC,EAHI,IAAI,KAAJ,IAAI,GAGR,EAAA,CAAA,CAAA,CAAA;AAED;AACA,IAAK,SAMJ,CAAA;AAND,CAAA,UAAK,SAAS,EAAA;AACZ,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,EANI,SAAS,KAAT,SAAS,GAMb,EAAA,CAAA,CAAA,CAAA;AAWD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCG;AACH,SAAS,eAAe,CAAC,KAAkB,EAAA;IACzC,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;AACpB,IAAA,IAAI,UAAU,GAAW,IAAI,KAAK,IAAI,CAAC,CAAC,GAAG,MAAM,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC;;AAG3E,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;;QAEb,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;;;;"}
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: number = axis === Axis.Y ? window.scrollY : window.scrollX;\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 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,KAAkB,EAAA;IACzC,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;AACpB,IAAA,IAAI,UAAU,GAAW,IAAI,KAAK,IAAI,CAAC,CAAC,GAAG,MAAM,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC;;AAG3E,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;;QAEb,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
@@ -57,5 +57,5 @@
57
57
  "lint:fix": "eslint src/**/*.ts --fix"
58
58
  },
59
59
  "type": "module",
60
- "version": "2.0.0"
60
+ "version": "2.1.0"
61
61
  }