@smakss/react-scroll-direction 1.1.0-beta → 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 +38 -25
- package/dist/cjs/index.js +50 -9
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/index.js +41 -2
- package/dist/esm/index.js.map +1 -1
- package/package.json +2 -1
package/Readme.md
CHANGED
|
@@ -1,61 +1,74 @@
|
|
|
1
|
-
#
|
|
1
|
+
# React Scroll Direction Hook
|
|
2
2
|
|
|
3
3
|
    
|
|
4
4
|
|
|
5
|
-
|
|
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
|
|
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
|
+
Experience `@smakss/react-scroll-direction` in action on CodeSandbox:
|
|
12
|
+
|
|
11
13
|
[](https://codesandbox.io/s/react-scroll-direction-tclwvp?fontsize=14&hidenavigation=1&theme=dark)
|
|
12
14
|
|
|
13
|
-
##
|
|
15
|
+
## Installation
|
|
14
16
|
|
|
15
|
-
|
|
17
|
+
Install `@smakss/react-scroll-direction` via npm or yarn:
|
|
16
18
|
|
|
17
19
|
```bash
|
|
18
|
-
npm
|
|
19
|
-
or
|
|
20
|
+
npm install @smakss/react-scroll-direction
|
|
21
|
+
# or
|
|
20
22
|
yarn add @smakss/react-scroll-direction
|
|
21
23
|
```
|
|
22
24
|
|
|
23
|
-
|
|
25
|
+
Then, import it into your project:
|
|
26
|
+
|
|
27
|
+
CommonJS:
|
|
24
28
|
|
|
25
29
|
```js
|
|
26
|
-
|
|
30
|
+
const useDetectScroll = require("@smakss/react-scroll-direction");
|
|
27
31
|
```
|
|
28
32
|
|
|
29
|
-
|
|
33
|
+
ES Module:
|
|
30
34
|
|
|
31
35
|
```js
|
|
32
|
-
import
|
|
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";
|
|
33
46
|
```
|
|
34
47
|
|
|
35
|
-
|
|
48
|
+
## Usage
|
|
36
49
|
|
|
37
|
-
The useDetectScroll
|
|
50
|
+
The `useDetectScroll` hook takes an options object that can include the following properties:
|
|
38
51
|
|
|
39
|
-
- `thr
|
|
40
|
-
- `axis
|
|
41
|
-
- `scrollUp
|
|
42
|
-
- `scrollDown
|
|
43
|
-
- `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"`).
|
|
44
57
|
|
|
45
|
-
## Examples
|
|
58
|
+
## Examples
|
|
46
59
|
|
|
47
|
-
|
|
60
|
+
To detect upward or downward scroll:
|
|
48
61
|
|
|
49
62
|
```js
|
|
50
|
-
const
|
|
63
|
+
const scrollDir = useDetectScroll({});
|
|
51
64
|
|
|
52
|
-
//
|
|
65
|
+
// Returns: "up", "down", or "still"
|
|
53
66
|
```
|
|
54
67
|
|
|
55
|
-
|
|
68
|
+
To detect left or right scroll:
|
|
56
69
|
|
|
57
70
|
```js
|
|
58
|
-
const
|
|
71
|
+
const scrollDir = useDetectScroll({ axis: "x" });
|
|
59
72
|
|
|
60
|
-
//
|
|
73
|
+
// Returns: "left", "right", or "still"
|
|
61
74
|
```
|
package/dist/cjs/index.js
CHANGED
|
@@ -1,28 +1,68 @@
|
|
|
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 */
|
|
8
|
+
exports.Axis = void 0;
|
|
6
9
|
(function (Axis) {
|
|
7
10
|
Axis["X"] = "x";
|
|
8
11
|
Axis["Y"] = "y";
|
|
9
|
-
})(Axis || (Axis = {}));
|
|
10
|
-
|
|
12
|
+
})(exports.Axis || (exports.Axis = {}));
|
|
13
|
+
/** Enumeration for direction values */
|
|
14
|
+
exports.Direction = void 0;
|
|
11
15
|
(function (Direction) {
|
|
12
16
|
Direction["Up"] = "up";
|
|
13
17
|
Direction["Down"] = "down";
|
|
14
18
|
Direction["Left"] = "left";
|
|
15
19
|
Direction["Right"] = "right";
|
|
16
20
|
Direction["Still"] = "still";
|
|
17
|
-
})(Direction || (Direction = {}));
|
|
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
|
+
*/
|
|
18
57
|
function useDetectScroll(props) {
|
|
19
|
-
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;
|
|
20
59
|
const [scrollDir, setScrollDir] = react.useState(still);
|
|
21
60
|
const threshold = Math.max(0, thr);
|
|
22
61
|
let ticking = false;
|
|
23
|
-
let lastScroll = axis === Axis.Y ? window.scrollY : window.scrollX;
|
|
62
|
+
let lastScroll = axis === exports.Axis.Y ? window.scrollY : window.scrollX;
|
|
63
|
+
/** Function to update scroll direction */
|
|
24
64
|
const updateScrollDir = react.useCallback(() => {
|
|
25
|
-
const scroll = axis === Axis.Y ? window.scrollY : window.scrollX;
|
|
65
|
+
const scroll = axis === exports.Axis.Y ? window.scrollY : window.scrollX;
|
|
26
66
|
if (Math.abs(scroll - lastScroll) >= threshold) {
|
|
27
67
|
setScrollDir(scroll > lastScroll ? scrollDown : scrollUp);
|
|
28
68
|
lastScroll = Math.max(0, scroll);
|
|
@@ -30,6 +70,7 @@ function useDetectScroll(props) {
|
|
|
30
70
|
ticking = false;
|
|
31
71
|
}, [axis, threshold, scrollDown, scrollUp]);
|
|
32
72
|
react.useEffect(() => {
|
|
73
|
+
/** Function to handle onScroll event */
|
|
33
74
|
const onScroll = () => {
|
|
34
75
|
if (!ticking) {
|
|
35
76
|
window.requestAnimationFrame(updateScrollDir);
|
|
@@ -39,8 +80,8 @@ function useDetectScroll(props) {
|
|
|
39
80
|
window.addEventListener("scroll", onScroll);
|
|
40
81
|
return () => window.removeEventListener("scroll", onScroll);
|
|
41
82
|
}, [updateScrollDir]);
|
|
42
|
-
return
|
|
83
|
+
return scrollDir;
|
|
43
84
|
}
|
|
44
85
|
|
|
45
|
-
exports.
|
|
86
|
+
exports.default = useDetectScroll;
|
|
46
87
|
//# sourceMappingURL=index.js.map
|
package/dist/cjs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/
|
|
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
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
import { useState, useCallback, useEffect } from 'react';
|
|
2
2
|
|
|
3
|
+
/** Enumeration for axis values */
|
|
3
4
|
var Axis;
|
|
4
5
|
(function (Axis) {
|
|
5
6
|
Axis["X"] = "x";
|
|
6
7
|
Axis["Y"] = "y";
|
|
7
8
|
})(Axis || (Axis = {}));
|
|
9
|
+
/** Enumeration for direction values */
|
|
8
10
|
var Direction;
|
|
9
11
|
(function (Direction) {
|
|
10
12
|
Direction["Up"] = "up";
|
|
@@ -13,12 +15,48 @@ var Direction;
|
|
|
13
15
|
Direction["Right"] = "right";
|
|
14
16
|
Direction["Still"] = "still";
|
|
15
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
|
+
*/
|
|
16
53
|
function useDetectScroll(props) {
|
|
17
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;
|
|
18
55
|
const [scrollDir, setScrollDir] = useState(still);
|
|
19
56
|
const threshold = Math.max(0, thr);
|
|
20
57
|
let ticking = false;
|
|
21
58
|
let lastScroll = axis === Axis.Y ? window.scrollY : window.scrollX;
|
|
59
|
+
/** Function to update scroll direction */
|
|
22
60
|
const updateScrollDir = useCallback(() => {
|
|
23
61
|
const scroll = axis === Axis.Y ? window.scrollY : window.scrollX;
|
|
24
62
|
if (Math.abs(scroll - lastScroll) >= threshold) {
|
|
@@ -28,6 +66,7 @@ function useDetectScroll(props) {
|
|
|
28
66
|
ticking = false;
|
|
29
67
|
}, [axis, threshold, scrollDown, scrollUp]);
|
|
30
68
|
useEffect(() => {
|
|
69
|
+
/** Function to handle onScroll event */
|
|
31
70
|
const onScroll = () => {
|
|
32
71
|
if (!ticking) {
|
|
33
72
|
window.requestAnimationFrame(updateScrollDir);
|
|
@@ -37,8 +76,8 @@ function useDetectScroll(props) {
|
|
|
37
76
|
window.addEventListener("scroll", onScroll);
|
|
38
77
|
return () => window.removeEventListener("scroll", onScroll);
|
|
39
78
|
}, [updateScrollDir]);
|
|
40
|
-
return
|
|
79
|
+
return scrollDir;
|
|
41
80
|
}
|
|
42
81
|
|
|
43
|
-
export { useDetectScroll };
|
|
82
|
+
export { Axis, Direction, useDetectScroll as default };
|
|
44
83
|
//# sourceMappingURL=index.js.map
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/
|
|
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
|
@@ -35,6 +35,7 @@
|
|
|
35
35
|
"SMAKSS",
|
|
36
36
|
"CommonJS",
|
|
37
37
|
"EcmaScript",
|
|
38
|
+
"TypeScript",
|
|
38
39
|
"detect scroll in react",
|
|
39
40
|
"react scroll",
|
|
40
41
|
"scroll direction"
|
|
@@ -56,5 +57,5 @@
|
|
|
56
57
|
"lint:fix": "eslint src/**/*.ts --fix"
|
|
57
58
|
},
|
|
58
59
|
"type": "module",
|
|
59
|
-
"version": "
|
|
60
|
+
"version": "2.1.0"
|
|
60
61
|
}
|