@smakss/react-scroll-direction 3.1.5-beta.0 → 4.0.0-beta.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.
- package/Readme.md +17 -16
- package/dist/esm/index.d.ts +20 -12
- package/dist/esm/index.js +31 -12
- package/dist/esm/index.js.map +1 -1
- package/package.json +10 -6
- package/dist/cjs/index.d.ts +0 -58
- package/dist/cjs/index.js +0 -88
- package/dist/cjs/index.js.map +0 -1
package/Readme.md
CHANGED
|
@@ -2,13 +2,13 @@
|
|
|
2
2
|
|
|
3
3
|
   
|
|
4
4
|
|
|
5
|
-
`@smakss/react-scroll-direction` is a versatile, lightweight React hook that detects scroll direction in your application with ease.
|
|
5
|
+
`@smakss/react-scroll-direction` is a versatile, lightweight React hook that not only detects the scroll direction but also provides the scroll position in your application with ease. This enhanced functionality includes detecting distances from the top, bottom, left, and right edges of the viewport, making it an ideal solution for advanced scroll-based interactions in your React applications.
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
Originally inspired by a [popular StackOverflow response](https://stackoverflow.com/a/62497293/11908502), this package has evolved into a comprehensive tool for managing scroll detection in React applications.
|
|
8
8
|
|
|
9
9
|
## Demo
|
|
10
10
|
|
|
11
|
-
Experience `@smakss/react-scroll-direction`
|
|
11
|
+
Experience the extended capabilities of `@smakss/react-scroll-direction` on CodeSandbox:
|
|
12
12
|
|
|
13
13
|
[](https://codesandbox.io/s/react-scroll-direction-tclwvp?fontsize=14&hidenavigation=1&theme=dark)
|
|
14
14
|
|
|
@@ -24,12 +24,6 @@ yarn add @smakss/react-scroll-direction
|
|
|
24
24
|
|
|
25
25
|
Then, import it into your project:
|
|
26
26
|
|
|
27
|
-
CommonJS:
|
|
28
|
-
|
|
29
|
-
```js
|
|
30
|
-
const useDetectScroll = require('@smakss/react-scroll-direction');
|
|
31
|
-
```
|
|
32
|
-
|
|
33
27
|
ES Module:
|
|
34
28
|
|
|
35
29
|
```js
|
|
@@ -47,7 +41,7 @@ import useDetectScroll, {
|
|
|
47
41
|
|
|
48
42
|
## Usage
|
|
49
43
|
|
|
50
|
-
The `useDetectScroll` hook takes an options object
|
|
44
|
+
The `useDetectScroll` hook takes an options object with the following properties:
|
|
51
45
|
|
|
52
46
|
- `thr`: Threshold for scroll direction change detection (default: `0`, accepts only positive values).
|
|
53
47
|
- `axis`: Defines the scroll axis (`"y"` or `"x"`, default: `"y"`).
|
|
@@ -55,22 +49,29 @@ The `useDetectScroll` hook takes an options object that can include the followin
|
|
|
55
49
|
- `scrollDown`: Value returned when scrolling down (y-axis) or right (x-axis) (default: `"down"` for y-axis, `"right"` for x-axis).
|
|
56
50
|
- `still`: Value returned when there's no scrolling activity (default: `"still"`).
|
|
57
51
|
|
|
52
|
+
The hook returns an object with two properties:
|
|
53
|
+
|
|
54
|
+
- `scrollDir`: Indicates the scroll direction (`"up"`, `"down"`, `"left"`, `"right"`, or `"still"`).
|
|
55
|
+
- `scrollPosition`: An object containing distances from the top, bottom, left, and right edges of the viewport.
|
|
56
|
+
|
|
58
57
|
## Examples
|
|
59
58
|
|
|
60
|
-
To detect
|
|
59
|
+
To detect both scroll direction and position:
|
|
61
60
|
|
|
62
61
|
```js
|
|
63
|
-
const scrollDir = useDetectScroll();
|
|
62
|
+
const { scrollDir, scrollPosition } = useDetectScroll();
|
|
64
63
|
|
|
65
|
-
//
|
|
64
|
+
// scrollDir: "up", "down", "left", "right", or "still"
|
|
65
|
+
// scrollPosition: { top, bottom, left, right }
|
|
66
66
|
```
|
|
67
67
|
|
|
68
|
-
To
|
|
68
|
+
To customize for horizontal scroll:
|
|
69
69
|
|
|
70
70
|
```js
|
|
71
|
-
const scrollDir = useDetectScroll({ axis:
|
|
71
|
+
const { scrollDir, scrollPosition } = useDetectScroll({ axis: Axis.X });
|
|
72
72
|
|
|
73
|
-
//
|
|
73
|
+
// scrollDir: "left", "right", or "still"
|
|
74
|
+
// scrollPosition: { top, bottom, left, right }
|
|
74
75
|
```
|
|
75
76
|
|
|
76
77
|
## Contributing
|
package/dist/esm/index.d.ts
CHANGED
|
@@ -11,6 +11,17 @@ export declare enum Direction {
|
|
|
11
11
|
Right = "right",
|
|
12
12
|
Still = "still"
|
|
13
13
|
}
|
|
14
|
+
type ScrollPosition = {
|
|
15
|
+
top: number;
|
|
16
|
+
bottom: number;
|
|
17
|
+
left: number;
|
|
18
|
+
right: number;
|
|
19
|
+
};
|
|
20
|
+
/** Type declaration for the returned scroll information */
|
|
21
|
+
type ScrollInfo = {
|
|
22
|
+
scrollDir: Direction;
|
|
23
|
+
scrollPosition: ScrollPosition;
|
|
24
|
+
};
|
|
14
25
|
/** Type declaration for scroll properties */
|
|
15
26
|
type ScrollProps = {
|
|
16
27
|
thr?: number;
|
|
@@ -22,15 +33,16 @@ type ScrollProps = {
|
|
|
22
33
|
/**
|
|
23
34
|
* useDetectScroll hook.
|
|
24
35
|
*
|
|
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
|
|
36
|
+
* This hook provides a mechanism to detect the scroll direction and position.
|
|
37
|
+
* It will return the scroll direction as a string (up, down, left, right, or still) based on user scrolling,
|
|
38
|
+
* as well as the scroll position from the top, bottom, left, and right edges of the page.
|
|
27
39
|
*
|
|
28
40
|
* @example
|
|
29
41
|
*
|
|
30
42
|
* import useDetectScroll, { Axis, Direction } from '@smakss/react-scroll-direction';
|
|
31
43
|
*
|
|
32
44
|
* function App() {
|
|
33
|
-
* const
|
|
45
|
+
* const { scrollDir, scrollPosition } = useDetectScroll({
|
|
34
46
|
* thr: 100,
|
|
35
47
|
* axis: Axis.Y,
|
|
36
48
|
* scrollUp: Direction.Up,
|
|
@@ -40,19 +52,15 @@ type ScrollProps = {
|
|
|
40
52
|
*
|
|
41
53
|
* return (
|
|
42
54
|
* <div>
|
|
43
|
-
* <p>Current scroll direction: {
|
|
55
|
+
* <p>Current scroll direction: {scrollDir}</p>
|
|
56
|
+
* <p>Scroll position - Top: {scrollPosition.top}, Bottom: {scrollPosition.bottom},
|
|
57
|
+
* Left: {scrollPosition.left}, Right: {scrollPosition.right}</p>
|
|
44
58
|
* </div>
|
|
45
59
|
* );
|
|
46
60
|
* }
|
|
47
61
|
*
|
|
48
62
|
* @param {ScrollProps} props - The properties related to scrolling.
|
|
49
|
-
* @
|
|
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.
|
|
63
|
+
* @returns {ScrollInfo} - The current direction and position of scrolling.
|
|
56
64
|
*/
|
|
57
|
-
declare function useDetectScroll(props?: ScrollProps):
|
|
65
|
+
declare function useDetectScroll(props?: ScrollProps): ScrollInfo;
|
|
58
66
|
export default useDetectScroll;
|
package/dist/esm/index.js
CHANGED
|
@@ -18,15 +18,16 @@ var Direction;
|
|
|
18
18
|
/**
|
|
19
19
|
* useDetectScroll hook.
|
|
20
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
|
|
21
|
+
* This hook provides a mechanism to detect the scroll direction and position.
|
|
22
|
+
* It will return the scroll direction as a string (up, down, left, right, or still) based on user scrolling,
|
|
23
|
+
* as well as the scroll position from the top, bottom, left, and right edges of the page.
|
|
23
24
|
*
|
|
24
25
|
* @example
|
|
25
26
|
*
|
|
26
27
|
* import useDetectScroll, { Axis, Direction } from '@smakss/react-scroll-direction';
|
|
27
28
|
*
|
|
28
29
|
* function App() {
|
|
29
|
-
* const
|
|
30
|
+
* const { scrollDir, scrollPosition } = useDetectScroll({
|
|
30
31
|
* thr: 100,
|
|
31
32
|
* axis: Axis.Y,
|
|
32
33
|
* scrollUp: Direction.Up,
|
|
@@ -36,23 +37,25 @@ var Direction;
|
|
|
36
37
|
*
|
|
37
38
|
* return (
|
|
38
39
|
* <div>
|
|
39
|
-
* <p>Current scroll direction: {
|
|
40
|
+
* <p>Current scroll direction: {scrollDir}</p>
|
|
41
|
+
* <p>Scroll position - Top: {scrollPosition.top}, Bottom: {scrollPosition.bottom},
|
|
42
|
+
* Left: {scrollPosition.left}, Right: {scrollPosition.right}</p>
|
|
40
43
|
* </div>
|
|
41
44
|
* );
|
|
42
45
|
* }
|
|
43
46
|
*
|
|
44
47
|
* @param {ScrollProps} props - The properties related to scrolling.
|
|
45
|
-
* @
|
|
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.
|
|
48
|
+
* @returns {ScrollInfo} - The current direction and position of scrolling.
|
|
52
49
|
*/
|
|
53
50
|
function useDetectScroll(props = {}) {
|
|
54
51
|
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
52
|
const [scrollDir, setScrollDir] = useState(still);
|
|
53
|
+
const [scrollPosition, setScrollPosition] = useState({
|
|
54
|
+
top: 0,
|
|
55
|
+
bottom: 0,
|
|
56
|
+
left: 0,
|
|
57
|
+
right: 0
|
|
58
|
+
});
|
|
56
59
|
const threshold = Math.max(0, thr);
|
|
57
60
|
let ticking = false;
|
|
58
61
|
let lastScroll = 0;
|
|
@@ -65,6 +68,22 @@ function useDetectScroll(props = {}) {
|
|
|
65
68
|
}
|
|
66
69
|
ticking = false;
|
|
67
70
|
}, [axis, threshold, scrollDown, scrollUp]);
|
|
71
|
+
useEffect(() => {
|
|
72
|
+
/** Function to update scroll position */
|
|
73
|
+
const updateScrollPosition = () => {
|
|
74
|
+
const top = window.scrollY;
|
|
75
|
+
const left = window.scrollX;
|
|
76
|
+
const bottom = document.documentElement.scrollHeight - window.innerHeight - top;
|
|
77
|
+
const right = document.documentElement.scrollWidth - window.innerWidth - left;
|
|
78
|
+
setScrollPosition({ top, bottom, left, right });
|
|
79
|
+
};
|
|
80
|
+
/** Call the update function when the component mounts */
|
|
81
|
+
updateScrollPosition();
|
|
82
|
+
window.addEventListener('scroll', updateScrollPosition);
|
|
83
|
+
return () => {
|
|
84
|
+
window.removeEventListener('scroll', updateScrollPosition);
|
|
85
|
+
};
|
|
86
|
+
}, []);
|
|
68
87
|
useEffect(() => {
|
|
69
88
|
lastScroll = axis === Axis.Y ? window.scrollY : window.scrollX;
|
|
70
89
|
/** Function to handle onScroll event */
|
|
@@ -77,7 +96,7 @@ function useDetectScroll(props = {}) {
|
|
|
77
96
|
window.addEventListener('scroll', onScroll);
|
|
78
97
|
return () => window.removeEventListener('scroll', onScroll);
|
|
79
98
|
}, [updateScrollDir]);
|
|
80
|
-
return scrollDir;
|
|
99
|
+
return { scrollDir, scrollPosition };
|
|
81
100
|
}
|
|
82
101
|
|
|
83
102
|
export { Axis, Direction, useDetectScroll as default };
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1 +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
|
|
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\ntype ScrollPosition = {\n top: number;\n bottom: number;\n left: number;\n right: number;\n};\n\n/** Type declaration for the returned scroll information */\ntype ScrollInfo = {\n scrollDir: Direction;\n scrollPosition: ScrollPosition;\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 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 { scrollDir, scrollPosition } = 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: {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 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 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 /** Function to update scroll position */\n const updateScrollPosition = () => {\n const top = window.scrollY;\n const left = window.scrollX;\n const bottom =\n document.documentElement.scrollHeight - window.innerHeight - top;\n const right =\n document.documentElement.scrollWidth - window.innerWidth - left;\n\n setScrollPosition({ top, bottom, left, right });\n };\n\n /** Call the update function when the component mounts */\n updateScrollPosition();\n\n window.addEventListener('scroll', updateScrollPosition);\n\n return () => {\n window.removeEventListener('scroll', updateScrollPosition);\n };\n }, []);\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, scrollPosition };\n}\n\nexport default useDetectScroll;\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -3,11 +3,10 @@
|
|
|
3
3
|
"bugs": {
|
|
4
4
|
"url": "https://github.com/SMAKSS/react-scroll-direction/issues"
|
|
5
5
|
},
|
|
6
|
-
"description": "
|
|
6
|
+
"description": "Enhance your React apps with advanced scroll detection using @smakss/react-scroll-direction. This powerful hook not only detects scroll direction but also provides scroll position information. Ideal for React, Remix, Next.js, and Gatsby projects, it comes with adjustable sensitivity and supports ES Modules.",
|
|
7
7
|
"devDependencies": {
|
|
8
8
|
"@commitlint/cli": "^18.4.3",
|
|
9
9
|
"@commitlint/config-conventional": "^18.4.3",
|
|
10
|
-
"@rollup/plugin-commonjs": "^25.0.7",
|
|
11
10
|
"@rollup/plugin-node-resolve": "^15.2.3",
|
|
12
11
|
"@rollup/plugin-typescript": "^11.1.5",
|
|
13
12
|
"@types/react": "^18.2.46",
|
|
@@ -35,9 +34,13 @@
|
|
|
35
34
|
"homepage": "https://github.com/SMAKSS/react-scroll-direction#readme",
|
|
36
35
|
"keywords": [
|
|
37
36
|
"react-scroll-direction",
|
|
37
|
+
"scroll-position-react",
|
|
38
|
+
"react-hook-scroll-position",
|
|
38
39
|
"scroll-detection-react",
|
|
40
|
+
"scroll-position-detection",
|
|
41
|
+
"scroll-direction-detection",
|
|
39
42
|
"react-hook-scroll",
|
|
40
|
-
"direction-detection",
|
|
43
|
+
"direction-and-position-detection",
|
|
41
44
|
"scroll-hook",
|
|
42
45
|
"npm",
|
|
43
46
|
"yarn",
|
|
@@ -47,12 +50,13 @@
|
|
|
47
50
|
"gatsby",
|
|
48
51
|
"scroll",
|
|
49
52
|
"direction",
|
|
53
|
+
"position",
|
|
50
54
|
"SMAKSS",
|
|
51
|
-
"CommonJS",
|
|
52
55
|
"EcmaScript",
|
|
53
56
|
"TypeScript",
|
|
54
57
|
"detect scroll in react",
|
|
55
|
-
"react scroll"
|
|
58
|
+
"react scroll position",
|
|
59
|
+
"react scroll direction and position"
|
|
56
60
|
],
|
|
57
61
|
"license": "MIT",
|
|
58
62
|
"main": "dist/cjs/index.js",
|
|
@@ -75,5 +79,5 @@
|
|
|
75
79
|
"typecheck": "tsc -b ."
|
|
76
80
|
},
|
|
77
81
|
"type": "module",
|
|
78
|
-
"version": "
|
|
82
|
+
"version": "4.0.0-beta.1"
|
|
79
83
|
}
|
package/dist/cjs/index.d.ts
DELETED
|
@@ -1,58 +0,0 @@
|
|
|
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
DELETED
|
@@ -1,88 +0,0 @@
|
|
|
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
DELETED
|
@@ -1 +0,0 @@
|
|
|
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,EACxB,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;SAClC;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;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;;;;"}
|