@smakss/react-scroll-direction 0.0.6 → 1.0.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 +11 -9
- package/dist/cjs/index.js +27 -10
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/index.js +27 -10
- package/dist/esm/index.js.map +1 -1
- package/package.json +1 -1
package/Readme.md
CHANGED
|
@@ -30,26 +30,28 @@ then to use it within your application you can do it just like below:
|
|
|
30
30
|
|
|
31
31
|
The useDetectScroll custom hook will accept 3 input parameter:
|
|
32
32
|
|
|
33
|
-
- `thr` (`
|
|
34
|
-
- `
|
|
35
|
-
- `
|
|
33
|
+
- `thr` (`number`): A number to indicate the threshold of firing scroll direction event, which is `0` by default and only accepts a positive numeric value. If it gets a higher value the steps will be longer.
|
|
34
|
+
- `axis` (`string`): Indicate the page scroll axis, whether, in the `y` or `x` axes, it is `y` by default.
|
|
35
|
+
- `scrollUp` (`string`): A string value for the output of the custom hook if the scroll direction is upward. The default value is `up` if the axis is `y` and `left` if the axis is `x`.
|
|
36
|
+
- `scrollDown` (`string`): A string value for the output of the custom hook if the scroll direction is downward. The default value is `down` if the axis is `y` and `right` if the axis is `x`.
|
|
37
|
+
- `still` (`string`): default value for the direction when there is no scrolling happening on the page. The default value is `still`.
|
|
36
38
|
|
|
37
39
|
## Examples of usage
|
|
38
40
|
|
|
39
|
-
|
|
41
|
+
### If the scroll goes upward/downward
|
|
40
42
|
|
|
41
43
|
```js
|
|
42
|
-
const [scrollDir] = useDetectScroll();
|
|
44
|
+
const [scrollDir] = useDetectScroll({});
|
|
43
45
|
|
|
44
|
-
// scrollDir: "up"
|
|
46
|
+
// scrollDir: "up"/"down"
|
|
45
47
|
```
|
|
46
48
|
|
|
47
|
-
|
|
49
|
+
### If the scroll goes left/right
|
|
48
50
|
|
|
49
51
|
```js
|
|
50
|
-
const [scrollDir] = useDetectScroll();
|
|
52
|
+
const [scrollDir] = useDetectScroll({ axis: "x" });
|
|
51
53
|
|
|
52
|
-
// scrollDir: "
|
|
54
|
+
// scrollDir: "left"/"right"
|
|
53
55
|
```
|
|
54
56
|
|
|
55
57
|
## Demo
|
package/dist/cjs/index.js
CHANGED
|
@@ -3,23 +3,38 @@
|
|
|
3
3
|
var react = require('react');
|
|
4
4
|
var PropTypes = require('prop-types');
|
|
5
5
|
|
|
6
|
-
function useDetectScroll(
|
|
7
|
-
const
|
|
6
|
+
function useDetectScroll(props) {
|
|
7
|
+
const {
|
|
8
|
+
thr = 0,
|
|
9
|
+
axis = "y",
|
|
10
|
+
scrollUp = axis === "y" ? "up" : "left",
|
|
11
|
+
scrollDown = axis === "y" ? "down" : "right",
|
|
12
|
+
still = "still",
|
|
13
|
+
} = props;
|
|
14
|
+
const [scrollDir, setScrollDir] = react.useState(still);
|
|
8
15
|
|
|
9
16
|
react.useEffect(() => {
|
|
10
|
-
const threshold = thr
|
|
11
|
-
let lastScrollY = window.pageYOffset;
|
|
17
|
+
const threshold = thr > 0 ? thr : 0;
|
|
12
18
|
let ticking = false;
|
|
19
|
+
let lastScroll = undefined;
|
|
20
|
+
|
|
21
|
+
axis === "y"
|
|
22
|
+
? (lastScroll = window.pageYOffset)
|
|
23
|
+
: (lastScroll = window.pageXOffset);
|
|
13
24
|
|
|
14
25
|
const updateScrollDir = () => {
|
|
15
|
-
|
|
26
|
+
let scroll = undefined;
|
|
27
|
+
|
|
28
|
+
axis === "y"
|
|
29
|
+
? (scroll = window.pageYOffset)
|
|
30
|
+
: (scroll = window.pageXOffset);
|
|
16
31
|
|
|
17
|
-
if (Math.abs(
|
|
32
|
+
if (Math.abs(scroll - lastScroll) < threshold) {
|
|
18
33
|
ticking = false;
|
|
19
34
|
return;
|
|
20
35
|
}
|
|
21
|
-
setScrollDir(
|
|
22
|
-
|
|
36
|
+
setScrollDir(scroll > lastScroll ? scrollDown : scrollUp);
|
|
37
|
+
lastScroll = scroll > 0 ? scrollY : 0;
|
|
23
38
|
ticking = false;
|
|
24
39
|
};
|
|
25
40
|
|
|
@@ -40,8 +55,10 @@ function useDetectScroll({ thr, up = "up", down = "down" }) {
|
|
|
40
55
|
|
|
41
56
|
useDetectScroll.propTypes = {
|
|
42
57
|
thr: PropTypes.number,
|
|
43
|
-
|
|
44
|
-
|
|
58
|
+
axis: PropTypes.string,
|
|
59
|
+
scrollUp: PropTypes.string,
|
|
60
|
+
scrollDown: PropTypes.string,
|
|
61
|
+
still: PropTypes.string,
|
|
45
62
|
};
|
|
46
63
|
|
|
47
64
|
exports.useDetectScroll = useDetectScroll;
|
package/dist/cjs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/hooks/useDetectScroll.js"],"sourcesContent":["import { useState, useEffect } from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction useDetectScroll({ thr
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/hooks/useDetectScroll.js"],"sourcesContent":["import { useState, useEffect } from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction useDetectScroll(props) {\n const {\n thr = 0,\n axis = \"y\",\n scrollUp = axis === \"y\" ? \"up\" : \"left\",\n scrollDown = axis === \"y\" ? \"down\" : \"right\",\n still = \"still\",\n } = props;\n const [scrollDir, setScrollDir] = useState(still);\n\n useEffect(() => {\n const threshold = thr > 0 ? thr : 0;\n let ticking = false;\n let lastScroll = undefined;\n\n axis === \"y\"\n ? (lastScroll = window.pageYOffset)\n : (lastScroll = window.pageXOffset);\n\n const updateScrollDir = () => {\n let scroll = undefined;\n\n axis === \"y\"\n ? (scroll = window.pageYOffset)\n : (scroll = window.pageXOffset);\n\n if (Math.abs(scroll - lastScroll) < threshold) {\n ticking = false;\n return;\n }\n setScrollDir(scroll > lastScroll ? scrollDown : scrollUp);\n lastScroll = scroll > 0 ? scrollY : 0;\n ticking = false;\n };\n\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 }, [scrollDir]);\n\n return [scrollDir];\n}\n\nexport default useDetectScroll;\n\nuseDetectScroll.propTypes = {\n thr: PropTypes.number,\n axis: PropTypes.string,\n scrollUp: PropTypes.string,\n scrollDown: PropTypes.string,\n still: PropTypes.string,\n};\n"],"names":["useState","useEffect"],"mappings":";;;;;AAGA,SAAS,eAAe,CAAC,KAAK,EAAE;AAChC,EAAE,MAAM;AACR,IAAI,GAAG,GAAG,CAAC;AACX,IAAI,IAAI,GAAG,GAAG;AACd,IAAI,QAAQ,GAAG,IAAI,KAAK,GAAG,GAAG,IAAI,GAAG,MAAM;AAC3C,IAAI,UAAU,GAAG,IAAI,KAAK,GAAG,GAAG,MAAM,GAAG,OAAO;AAChD,IAAI,KAAK,GAAG,OAAO;AACnB,GAAG,GAAG,KAAK,CAAC;AACZ,EAAE,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAGA,cAAQ,CAAC,KAAK,CAAC,CAAC;AACpD;AACA,EAAEC,eAAS,CAAC,MAAM;AAClB,IAAI,MAAM,SAAS,GAAG,GAAG,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,CAAC;AACxC,IAAI,IAAI,OAAO,GAAG,KAAK,CAAC;AACxB,IAAI,IAAI,UAAU,GAAG,SAAS,CAAC;AAC/B;AACA,IAAI,IAAI,KAAK,GAAG;AAChB,SAAS,UAAU,GAAG,MAAM,CAAC,WAAW;AACxC,SAAS,UAAU,GAAG,MAAM,CAAC,WAAW,CAAC,CAAC;AAC1C;AACA,IAAI,MAAM,eAAe,GAAG,MAAM;AAClC,MAAM,IAAI,MAAM,GAAG,SAAS,CAAC;AAC7B;AACA,MAAM,IAAI,KAAK,GAAG;AAClB,WAAW,MAAM,GAAG,MAAM,CAAC,WAAW;AACtC,WAAW,MAAM,GAAG,MAAM,CAAC,WAAW,CAAC,CAAC;AACxC;AACA,MAAM,IAAI,IAAI,CAAC,GAAG,CAAC,MAAM,GAAG,UAAU,CAAC,GAAG,SAAS,EAAE;AACrD,QAAQ,OAAO,GAAG,KAAK,CAAC;AACxB,QAAQ,OAAO;AACf,OAAO;AACP,MAAM,YAAY,CAAC,MAAM,GAAG,UAAU,GAAG,UAAU,GAAG,QAAQ,CAAC,CAAC;AAChE,MAAM,UAAU,GAAG,MAAM,GAAG,CAAC,GAAG,OAAO,GAAG,CAAC,CAAC;AAC5C,MAAM,OAAO,GAAG,KAAK,CAAC;AACtB,KAAK,CAAC;AACN;AACA,IAAI,MAAM,QAAQ,GAAG,MAAM;AAC3B,MAAM,IAAI,CAAC,OAAO,EAAE;AACpB,QAAQ,MAAM,CAAC,qBAAqB,CAAC,eAAe,CAAC,CAAC;AACtD,QAAQ,OAAO,GAAG,IAAI,CAAC;AACvB,OAAO;AACP,KAAK,CAAC;AACN;AACA,IAAI,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;AAChD;AACA,IAAI,OAAO,MAAM,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;AAChE,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;AAClB;AACA,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;AACrB,CAAC;AAGD;AACA,eAAe,CAAC,SAAS,GAAG;AAC5B,EAAE,GAAG,EAAE,SAAS,CAAC,MAAM;AACvB,EAAE,IAAI,EAAE,SAAS,CAAC,MAAM;AACxB,EAAE,QAAQ,EAAE,SAAS,CAAC,MAAM;AAC5B,EAAE,UAAU,EAAE,SAAS,CAAC,MAAM;AAC9B,EAAE,KAAK,EAAE,SAAS,CAAC,MAAM;AACzB,CAAC;;;;"}
|
package/dist/esm/index.js
CHANGED
|
@@ -1,23 +1,38 @@
|
|
|
1
1
|
import { useState, useEffect } from 'react';
|
|
2
2
|
import PropTypes from 'prop-types';
|
|
3
3
|
|
|
4
|
-
function useDetectScroll(
|
|
5
|
-
const
|
|
4
|
+
function useDetectScroll(props) {
|
|
5
|
+
const {
|
|
6
|
+
thr = 0,
|
|
7
|
+
axis = "y",
|
|
8
|
+
scrollUp = axis === "y" ? "up" : "left",
|
|
9
|
+
scrollDown = axis === "y" ? "down" : "right",
|
|
10
|
+
still = "still",
|
|
11
|
+
} = props;
|
|
12
|
+
const [scrollDir, setScrollDir] = useState(still);
|
|
6
13
|
|
|
7
14
|
useEffect(() => {
|
|
8
|
-
const threshold = thr
|
|
9
|
-
let lastScrollY = window.pageYOffset;
|
|
15
|
+
const threshold = thr > 0 ? thr : 0;
|
|
10
16
|
let ticking = false;
|
|
17
|
+
let lastScroll = undefined;
|
|
18
|
+
|
|
19
|
+
axis === "y"
|
|
20
|
+
? (lastScroll = window.pageYOffset)
|
|
21
|
+
: (lastScroll = window.pageXOffset);
|
|
11
22
|
|
|
12
23
|
const updateScrollDir = () => {
|
|
13
|
-
|
|
24
|
+
let scroll = undefined;
|
|
25
|
+
|
|
26
|
+
axis === "y"
|
|
27
|
+
? (scroll = window.pageYOffset)
|
|
28
|
+
: (scroll = window.pageXOffset);
|
|
14
29
|
|
|
15
|
-
if (Math.abs(
|
|
30
|
+
if (Math.abs(scroll - lastScroll) < threshold) {
|
|
16
31
|
ticking = false;
|
|
17
32
|
return;
|
|
18
33
|
}
|
|
19
|
-
setScrollDir(
|
|
20
|
-
|
|
34
|
+
setScrollDir(scroll > lastScroll ? scrollDown : scrollUp);
|
|
35
|
+
lastScroll = scroll > 0 ? scrollY : 0;
|
|
21
36
|
ticking = false;
|
|
22
37
|
};
|
|
23
38
|
|
|
@@ -38,8 +53,10 @@ function useDetectScroll({ thr, up = "up", down = "down" }) {
|
|
|
38
53
|
|
|
39
54
|
useDetectScroll.propTypes = {
|
|
40
55
|
thr: PropTypes.number,
|
|
41
|
-
|
|
42
|
-
|
|
56
|
+
axis: PropTypes.string,
|
|
57
|
+
scrollUp: PropTypes.string,
|
|
58
|
+
scrollDown: PropTypes.string,
|
|
59
|
+
still: PropTypes.string,
|
|
43
60
|
};
|
|
44
61
|
|
|
45
62
|
export { useDetectScroll };
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/hooks/useDetectScroll.js"],"sourcesContent":["import { useState, useEffect } from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction useDetectScroll({ thr
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/hooks/useDetectScroll.js"],"sourcesContent":["import { useState, useEffect } from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction useDetectScroll(props) {\n const {\n thr = 0,\n axis = \"y\",\n scrollUp = axis === \"y\" ? \"up\" : \"left\",\n scrollDown = axis === \"y\" ? \"down\" : \"right\",\n still = \"still\",\n } = props;\n const [scrollDir, setScrollDir] = useState(still);\n\n useEffect(() => {\n const threshold = thr > 0 ? thr : 0;\n let ticking = false;\n let lastScroll = undefined;\n\n axis === \"y\"\n ? (lastScroll = window.pageYOffset)\n : (lastScroll = window.pageXOffset);\n\n const updateScrollDir = () => {\n let scroll = undefined;\n\n axis === \"y\"\n ? (scroll = window.pageYOffset)\n : (scroll = window.pageXOffset);\n\n if (Math.abs(scroll - lastScroll) < threshold) {\n ticking = false;\n return;\n }\n setScrollDir(scroll > lastScroll ? scrollDown : scrollUp);\n lastScroll = scroll > 0 ? scrollY : 0;\n ticking = false;\n };\n\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 }, [scrollDir]);\n\n return [scrollDir];\n}\n\nexport default useDetectScroll;\n\nuseDetectScroll.propTypes = {\n thr: PropTypes.number,\n axis: PropTypes.string,\n scrollUp: PropTypes.string,\n scrollDown: PropTypes.string,\n still: PropTypes.string,\n};\n"],"names":[],"mappings":";;;AAGA,SAAS,eAAe,CAAC,KAAK,EAAE;AAChC,EAAE,MAAM;AACR,IAAI,GAAG,GAAG,CAAC;AACX,IAAI,IAAI,GAAG,GAAG;AACd,IAAI,QAAQ,GAAG,IAAI,KAAK,GAAG,GAAG,IAAI,GAAG,MAAM;AAC3C,IAAI,UAAU,GAAG,IAAI,KAAK,GAAG,GAAG,MAAM,GAAG,OAAO;AAChD,IAAI,KAAK,GAAG,OAAO;AACnB,GAAG,GAAG,KAAK,CAAC;AACZ,EAAE,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;AACpD;AACA,EAAE,SAAS,CAAC,MAAM;AAClB,IAAI,MAAM,SAAS,GAAG,GAAG,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,CAAC;AACxC,IAAI,IAAI,OAAO,GAAG,KAAK,CAAC;AACxB,IAAI,IAAI,UAAU,GAAG,SAAS,CAAC;AAC/B;AACA,IAAI,IAAI,KAAK,GAAG;AAChB,SAAS,UAAU,GAAG,MAAM,CAAC,WAAW;AACxC,SAAS,UAAU,GAAG,MAAM,CAAC,WAAW,CAAC,CAAC;AAC1C;AACA,IAAI,MAAM,eAAe,GAAG,MAAM;AAClC,MAAM,IAAI,MAAM,GAAG,SAAS,CAAC;AAC7B;AACA,MAAM,IAAI,KAAK,GAAG;AAClB,WAAW,MAAM,GAAG,MAAM,CAAC,WAAW;AACtC,WAAW,MAAM,GAAG,MAAM,CAAC,WAAW,CAAC,CAAC;AACxC;AACA,MAAM,IAAI,IAAI,CAAC,GAAG,CAAC,MAAM,GAAG,UAAU,CAAC,GAAG,SAAS,EAAE;AACrD,QAAQ,OAAO,GAAG,KAAK,CAAC;AACxB,QAAQ,OAAO;AACf,OAAO;AACP,MAAM,YAAY,CAAC,MAAM,GAAG,UAAU,GAAG,UAAU,GAAG,QAAQ,CAAC,CAAC;AAChE,MAAM,UAAU,GAAG,MAAM,GAAG,CAAC,GAAG,OAAO,GAAG,CAAC,CAAC;AAC5C,MAAM,OAAO,GAAG,KAAK,CAAC;AACtB,KAAK,CAAC;AACN;AACA,IAAI,MAAM,QAAQ,GAAG,MAAM;AAC3B,MAAM,IAAI,CAAC,OAAO,EAAE;AACpB,QAAQ,MAAM,CAAC,qBAAqB,CAAC,eAAe,CAAC,CAAC;AACtD,QAAQ,OAAO,GAAG,IAAI,CAAC;AACvB,OAAO;AACP,KAAK,CAAC;AACN;AACA,IAAI,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;AAChD;AACA,IAAI,OAAO,MAAM,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;AAChE,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;AAClB;AACA,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;AACrB,CAAC;AAGD;AACA,eAAe,CAAC,SAAS,GAAG;AAC5B,EAAE,GAAG,EAAE,SAAS,CAAC,MAAM;AACvB,EAAE,IAAI,EAAE,SAAS,CAAC,MAAM;AACxB,EAAE,QAAQ,EAAE,SAAS,CAAC,MAAM;AAC5B,EAAE,UAAU,EAAE,SAAS,CAAC,MAAM;AAC9B,EAAE,KAAK,EAAE,SAAS,CAAC,MAAM;AACzB,CAAC;;;;"}
|
package/package.json
CHANGED