@smakss/react-scroll-direction 3.1.4 → 4.0.0-beta.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/dist/cjs/index.d.ts +20 -12
- package/dist/cjs/index.js +31 -12
- package/dist/cjs/index.js.map +1 -1
- 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 +16 -16
package/dist/cjs/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/cjs/index.js
CHANGED
|
@@ -22,15 +22,16 @@ exports.Direction = void 0;
|
|
|
22
22
|
/**
|
|
23
23
|
* useDetectScroll hook.
|
|
24
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
|
|
25
|
+
* This hook provides a mechanism to detect the scroll direction and position.
|
|
26
|
+
* It will return the scroll direction as a string (up, down, left, right, or still) based on user scrolling,
|
|
27
|
+
* as well as the scroll position from the top, bottom, left, and right edges of the page.
|
|
27
28
|
*
|
|
28
29
|
* @example
|
|
29
30
|
*
|
|
30
31
|
* import useDetectScroll, { Axis, Direction } from '@smakss/react-scroll-direction';
|
|
31
32
|
*
|
|
32
33
|
* function App() {
|
|
33
|
-
* const
|
|
34
|
+
* const { scrollDir, scrollPosition } = useDetectScroll({
|
|
34
35
|
* thr: 100,
|
|
35
36
|
* axis: Axis.Y,
|
|
36
37
|
* scrollUp: Direction.Up,
|
|
@@ -40,23 +41,25 @@ exports.Direction = void 0;
|
|
|
40
41
|
*
|
|
41
42
|
* return (
|
|
42
43
|
* <div>
|
|
43
|
-
* <p>Current scroll direction: {
|
|
44
|
+
* <p>Current scroll direction: {scrollDir}</p>
|
|
45
|
+
* <p>Scroll position - Top: {scrollPosition.top}, Bottom: {scrollPosition.bottom},
|
|
46
|
+
* Left: {scrollPosition.left}, Right: {scrollPosition.right}</p>
|
|
44
47
|
* </div>
|
|
45
48
|
* );
|
|
46
49
|
* }
|
|
47
50
|
*
|
|
48
51
|
* @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.
|
|
52
|
+
* @returns {ScrollInfo} - The current direction and position of scrolling.
|
|
56
53
|
*/
|
|
57
54
|
function useDetectScroll(props = {}) {
|
|
58
55
|
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
56
|
const [scrollDir, setScrollDir] = react.useState(still);
|
|
57
|
+
const [scrollPosition, setScrollPosition] = react.useState({
|
|
58
|
+
top: 0,
|
|
59
|
+
bottom: 0,
|
|
60
|
+
left: 0,
|
|
61
|
+
right: 0
|
|
62
|
+
});
|
|
60
63
|
const threshold = Math.max(0, thr);
|
|
61
64
|
let ticking = false;
|
|
62
65
|
let lastScroll = 0;
|
|
@@ -69,6 +72,22 @@ function useDetectScroll(props = {}) {
|
|
|
69
72
|
}
|
|
70
73
|
ticking = false;
|
|
71
74
|
}, [axis, threshold, scrollDown, scrollUp]);
|
|
75
|
+
react.useEffect(() => {
|
|
76
|
+
/** Function to update scroll position */
|
|
77
|
+
const updateScrollPosition = () => {
|
|
78
|
+
const top = window.scrollY;
|
|
79
|
+
const left = window.scrollX;
|
|
80
|
+
const bottom = document.documentElement.scrollHeight - window.innerHeight - top;
|
|
81
|
+
const right = document.documentElement.scrollWidth - window.innerWidth - left;
|
|
82
|
+
setScrollPosition({ top, bottom, left, right });
|
|
83
|
+
};
|
|
84
|
+
/** Call the update function when the component mounts */
|
|
85
|
+
updateScrollPosition();
|
|
86
|
+
window.addEventListener('scroll', updateScrollPosition);
|
|
87
|
+
return () => {
|
|
88
|
+
window.removeEventListener('scroll', updateScrollPosition);
|
|
89
|
+
};
|
|
90
|
+
}, []);
|
|
72
91
|
react.useEffect(() => {
|
|
73
92
|
lastScroll = axis === exports.Axis.Y ? window.scrollY : window.scrollX;
|
|
74
93
|
/** Function to handle onScroll event */
|
|
@@ -81,7 +100,7 @@ function useDetectScroll(props = {}) {
|
|
|
81
100
|
window.addEventListener('scroll', onScroll);
|
|
82
101
|
return () => window.removeEventListener('scroll', onScroll);
|
|
83
102
|
}, [updateScrollDir]);
|
|
84
|
-
return scrollDir;
|
|
103
|
+
return { scrollDir, scrollPosition };
|
|
85
104
|
}
|
|
86
105
|
|
|
87
106
|
exports.default = useDetectScroll;
|
package/dist/cjs/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":["Axis","Direction","useState","useCallback","useEffect"],"mappings":"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"}
|
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
|
@@ -5,22 +5,22 @@
|
|
|
5
5
|
},
|
|
6
6
|
"description": "Effortlessly detect scroll direction in React apps with @smakss/react-scroll-direction. Perfect for React, Remix, Next.js, and Gatsby projects, offering adjustable sensitivity.",
|
|
7
7
|
"devDependencies": {
|
|
8
|
-
"@commitlint/cli": "^18.
|
|
9
|
-
"@commitlint/config-conventional": "^18.
|
|
10
|
-
"@rollup/plugin-commonjs": "^25.0.
|
|
11
|
-
"@rollup/plugin-node-resolve": "^15.
|
|
12
|
-
"@rollup/plugin-typescript": "^11.1.
|
|
13
|
-
"@types/react": "^18.2.
|
|
14
|
-
"@typescript-eslint/eslint-plugin": "^
|
|
15
|
-
"@typescript-eslint/parser": "^
|
|
16
|
-
"eslint": "^8.
|
|
17
|
-
"eslint-config-prettier": "9.
|
|
18
|
-
"eslint-plugin-prettier": "^
|
|
8
|
+
"@commitlint/cli": "^18.4.3",
|
|
9
|
+
"@commitlint/config-conventional": "^18.4.3",
|
|
10
|
+
"@rollup/plugin-commonjs": "^25.0.7",
|
|
11
|
+
"@rollup/plugin-node-resolve": "^15.2.3",
|
|
12
|
+
"@rollup/plugin-typescript": "^11.1.5",
|
|
13
|
+
"@types/react": "^18.2.46",
|
|
14
|
+
"@typescript-eslint/eslint-plugin": "^6.16.0",
|
|
15
|
+
"@typescript-eslint/parser": "^6.16.0",
|
|
16
|
+
"eslint": "^8.56.0",
|
|
17
|
+
"eslint-config-prettier": "^9.1.0",
|
|
18
|
+
"eslint-plugin-prettier": "^5.1.2",
|
|
19
19
|
"husky": "^8.0.3",
|
|
20
|
-
"lint-staged": "^15.0
|
|
21
|
-
"prettier": "^3.1.
|
|
22
|
-
"rollup": "^4.
|
|
23
|
-
"typescript": "^5.
|
|
20
|
+
"lint-staged": "^15.2.0",
|
|
21
|
+
"prettier": "^3.1.1",
|
|
22
|
+
"rollup": "^4.9.1",
|
|
23
|
+
"typescript": "^5.3.3"
|
|
24
24
|
},
|
|
25
25
|
"engines": {
|
|
26
26
|
"node": ">=18.0.0"
|
|
@@ -75,5 +75,5 @@
|
|
|
75
75
|
"typecheck": "tsc -b ."
|
|
76
76
|
},
|
|
77
77
|
"type": "module",
|
|
78
|
-
"version": "
|
|
78
|
+
"version": "4.0.0-beta.0"
|
|
79
79
|
}
|