@react-scrollytelling/react-spring 0.2.1 → 0.3.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/index.cjs ADDED
@@ -0,0 +1,88 @@
1
+ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
2
+ let react_compiler_runtime = require("react/compiler-runtime");
3
+ let react = require("react");
4
+ let _react_scrollytelling_core = require("@react-scrollytelling/core");
5
+ let _react_spring_web = require("@react-spring/web");
6
+ let _react_scrollytelling_grouped = require("@react-scrollytelling/grouped");
7
+
8
+ //#region src/hooks/useSectionScrollSpring.ts
9
+ /**
10
+ * Get the Spring value (react-spring) of the section scroll
11
+ * @param sectionRef - The reference to the section element
12
+ * @param shouldObserve - Whether the underlying IntersectionObserver should be active
13
+ * @param onScroll - The callback to track the scroll ratio
14
+ */
15
+ function useSectionScrollSpring(sectionRef, onScroll, t0, options) {
16
+ const $ = (0, react_compiler_runtime.c)(5);
17
+ const shouldObserve = t0 === void 0 ? true : t0;
18
+ const [scrolledRatioSpring] = (0, react.useState)(_temp$1);
19
+ let t1;
20
+ if ($[0] !== onScroll || $[1] !== scrolledRatioSpring) {
21
+ t1 = (scrollInfo) => {
22
+ const { scrolledRatio } = scrollInfo;
23
+ scrolledRatioSpring.set(scrolledRatio);
24
+ if (onScroll) onScroll(scrollInfo);
25
+ };
26
+ $[0] = onScroll;
27
+ $[1] = scrolledRatioSpring;
28
+ $[2] = t1;
29
+ } else t1 = $[2];
30
+ (0, _react_scrollytelling_core.useSectionScroll)(sectionRef, t1, shouldObserve, options);
31
+ let t2;
32
+ if ($[3] !== scrolledRatioSpring) {
33
+ t2 = { scrolledRatioSpring };
34
+ $[3] = scrolledRatioSpring;
35
+ $[4] = t2;
36
+ } else t2 = $[4];
37
+ return t2;
38
+ }
39
+ function _temp$1() {
40
+ return new _react_spring_web.SpringValue(0);
41
+ }
42
+
43
+ //#endregion
44
+ //#region src/hooks/useActiveSectionSpring.ts
45
+ /**
46
+ * Watches for all tracked sections to find the section closet to the bottom of the viewport
47
+ * through ScrollytellingProvider.
48
+ * It invokes the onActiveSectionChange when the active section changes.
49
+ * Returns the Spring value (react-spring) of the section scroll.
50
+ * @param onActiveSectionChange - The callback needs to be memoized
51
+ * @returns The trackingId of the active section and the Spring value of the section scroll
52
+ */
53
+ function useActiveSectionSpring(onActiveSectionChange) {
54
+ const $ = (0, react_compiler_runtime.c)(6);
55
+ const [scrolledRatioSpring] = (0, react.useState)(_temp);
56
+ const [trackingId, setTrackingId] = (0, react.useState)(null);
57
+ let t0;
58
+ if ($[0] !== onActiveSectionChange || $[1] !== scrolledRatioSpring) {
59
+ t0 = (scrollInfo) => {
60
+ const { trackingId: id, scrolledRatio } = scrollInfo;
61
+ setTrackingId(id);
62
+ scrolledRatioSpring.set(scrolledRatio);
63
+ if (onActiveSectionChange) onActiveSectionChange(scrollInfo);
64
+ };
65
+ $[0] = onActiveSectionChange;
66
+ $[1] = scrolledRatioSpring;
67
+ $[2] = t0;
68
+ } else t0 = $[2];
69
+ (0, _react_scrollytelling_grouped.useActiveSection)(t0);
70
+ let t1;
71
+ if ($[3] !== scrolledRatioSpring || $[4] !== trackingId) {
72
+ t1 = {
73
+ trackingId,
74
+ scrolledRatioSpring
75
+ };
76
+ $[3] = scrolledRatioSpring;
77
+ $[4] = trackingId;
78
+ $[5] = t1;
79
+ } else t1 = $[5];
80
+ return t1;
81
+ }
82
+ function _temp() {
83
+ return new _react_spring_web.SpringValue(0);
84
+ }
85
+
86
+ //#endregion
87
+ exports.useActiveSectionSpring = useActiveSectionSpring;
88
+ exports.useSectionScrollSpring = useSectionScrollSpring;
@@ -0,0 +1,31 @@
1
+ import { IntersectionObserverOptions, SectionScrollInfo } from "@react-scrollytelling/core";
2
+ import { SpringValue } from "@react-spring/web";
3
+ import { ActiveSectionObserver } from "@react-scrollytelling/grouped";
4
+
5
+ //#region src/hooks/useSectionScrollSpring.d.ts
6
+ /**
7
+ * Get the Spring value (react-spring) of the section scroll
8
+ * @param sectionRef - The reference to the section element
9
+ * @param shouldObserve - Whether the underlying IntersectionObserver should be active
10
+ * @param onScroll - The callback to track the scroll ratio
11
+ */
12
+ declare function useSectionScrollSpring(sectionRef: React.RefObject<Element>, onScroll?: (scrollInfo: SectionScrollInfo) => void, shouldObserve?: boolean, options?: IntersectionObserverOptions): {
13
+ scrolledRatioSpring: SpringValue<number>;
14
+ };
15
+ //#endregion
16
+ //#region src/hooks/useActiveSectionSpring.d.ts
17
+ /**
18
+ * Watches for all tracked sections to find the section closet to the bottom of the viewport
19
+ * through ScrollytellingProvider.
20
+ * It invokes the onActiveSectionChange when the active section changes.
21
+ * Returns the Spring value (react-spring) of the section scroll.
22
+ * @param onActiveSectionChange - The callback needs to be memoized
23
+ * @returns The trackingId of the active section and the Spring value of the section scroll
24
+ */
25
+ declare function useActiveSectionSpring(onActiveSectionChange?: ActiveSectionObserver): {
26
+ trackingId: string | null;
27
+ scrolledRatioSpring: SpringValue<number>;
28
+ };
29
+ //#endregion
30
+ export { useActiveSectionSpring, useSectionScrollSpring };
31
+ //# sourceMappingURL=index.d.cts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.cts","names":[],"sources":["../src/hooks/useSectionScrollSpring.ts","../src/hooks/useActiveSectionSpring.ts"],"mappings":";;;;;;;;AAeA;;;iBAAgB,sBAAA,CACd,UAAA,EAAY,KAAA,CAAM,SAAA,CAAU,OAAA,GAC5B,QAAA,IAAY,UAAA,EAAY,iBAAA,WACxB,aAAA,YACA,OAAA,GAAU,2BAAA;;;;;;;;AAJZ;;;;;iBCEgB,sBAAA,CACd,qBAAA,GAAwB,qBAAA;;uBAAA,WAAA;AAAA"}
@@ -0,0 +1,31 @@
1
+ import { IntersectionObserverOptions, SectionScrollInfo } from "@react-scrollytelling/core";
2
+ import { SpringValue } from "@react-spring/web";
3
+ import { ActiveSectionObserver } from "@react-scrollytelling/grouped";
4
+
5
+ //#region src/hooks/useSectionScrollSpring.d.ts
6
+ /**
7
+ * Get the Spring value (react-spring) of the section scroll
8
+ * @param sectionRef - The reference to the section element
9
+ * @param shouldObserve - Whether the underlying IntersectionObserver should be active
10
+ * @param onScroll - The callback to track the scroll ratio
11
+ */
12
+ declare function useSectionScrollSpring(sectionRef: React.RefObject<Element>, onScroll?: (scrollInfo: SectionScrollInfo) => void, shouldObserve?: boolean, options?: IntersectionObserverOptions): {
13
+ scrolledRatioSpring: SpringValue<number>;
14
+ };
15
+ //#endregion
16
+ //#region src/hooks/useActiveSectionSpring.d.ts
17
+ /**
18
+ * Watches for all tracked sections to find the section closet to the bottom of the viewport
19
+ * through ScrollytellingProvider.
20
+ * It invokes the onActiveSectionChange when the active section changes.
21
+ * Returns the Spring value (react-spring) of the section scroll.
22
+ * @param onActiveSectionChange - The callback needs to be memoized
23
+ * @returns The trackingId of the active section and the Spring value of the section scroll
24
+ */
25
+ declare function useActiveSectionSpring(onActiveSectionChange?: ActiveSectionObserver): {
26
+ trackingId: string | null;
27
+ scrolledRatioSpring: SpringValue<number>;
28
+ };
29
+ //#endregion
30
+ export { useActiveSectionSpring, useSectionScrollSpring };
31
+ //# sourceMappingURL=index.d.mts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.mts","names":[],"sources":["../src/hooks/useSectionScrollSpring.ts","../src/hooks/useActiveSectionSpring.ts"],"mappings":";;;;;;;;AAeA;;;iBAAgB,sBAAA,CACd,UAAA,EAAY,KAAA,CAAM,SAAA,CAAU,OAAA,GAC5B,QAAA,IAAY,UAAA,EAAY,iBAAA,WACxB,aAAA,YACA,OAAA,GAAU,2BAAA;;;;;;;;AAJZ;;;;;iBCEgB,sBAAA,CACd,qBAAA,GAAwB,qBAAA;;uBAAA,WAAA;AAAA"}
package/dist/index.mjs ADDED
@@ -0,0 +1,87 @@
1
+ import { c } from "react/compiler-runtime";
2
+ import { useState } from "react";
3
+ import { useSectionScroll } from "@react-scrollytelling/core";
4
+ import { SpringValue } from "@react-spring/web";
5
+ import { useActiveSection } from "@react-scrollytelling/grouped";
6
+
7
+ //#region src/hooks/useSectionScrollSpring.ts
8
+ /**
9
+ * Get the Spring value (react-spring) of the section scroll
10
+ * @param sectionRef - The reference to the section element
11
+ * @param shouldObserve - Whether the underlying IntersectionObserver should be active
12
+ * @param onScroll - The callback to track the scroll ratio
13
+ */
14
+ function useSectionScrollSpring(sectionRef, onScroll, t0, options) {
15
+ const $ = c(5);
16
+ const shouldObserve = t0 === void 0 ? true : t0;
17
+ const [scrolledRatioSpring] = useState(_temp$1);
18
+ let t1;
19
+ if ($[0] !== onScroll || $[1] !== scrolledRatioSpring) {
20
+ t1 = (scrollInfo) => {
21
+ const { scrolledRatio } = scrollInfo;
22
+ scrolledRatioSpring.set(scrolledRatio);
23
+ if (onScroll) onScroll(scrollInfo);
24
+ };
25
+ $[0] = onScroll;
26
+ $[1] = scrolledRatioSpring;
27
+ $[2] = t1;
28
+ } else t1 = $[2];
29
+ useSectionScroll(sectionRef, t1, shouldObserve, options);
30
+ let t2;
31
+ if ($[3] !== scrolledRatioSpring) {
32
+ t2 = { scrolledRatioSpring };
33
+ $[3] = scrolledRatioSpring;
34
+ $[4] = t2;
35
+ } else t2 = $[4];
36
+ return t2;
37
+ }
38
+ function _temp$1() {
39
+ return new SpringValue(0);
40
+ }
41
+
42
+ //#endregion
43
+ //#region src/hooks/useActiveSectionSpring.ts
44
+ /**
45
+ * Watches for all tracked sections to find the section closet to the bottom of the viewport
46
+ * through ScrollytellingProvider.
47
+ * It invokes the onActiveSectionChange when the active section changes.
48
+ * Returns the Spring value (react-spring) of the section scroll.
49
+ * @param onActiveSectionChange - The callback needs to be memoized
50
+ * @returns The trackingId of the active section and the Spring value of the section scroll
51
+ */
52
+ function useActiveSectionSpring(onActiveSectionChange) {
53
+ const $ = c(6);
54
+ const [scrolledRatioSpring] = useState(_temp);
55
+ const [trackingId, setTrackingId] = useState(null);
56
+ let t0;
57
+ if ($[0] !== onActiveSectionChange || $[1] !== scrolledRatioSpring) {
58
+ t0 = (scrollInfo) => {
59
+ const { trackingId: id, scrolledRatio } = scrollInfo;
60
+ setTrackingId(id);
61
+ scrolledRatioSpring.set(scrolledRatio);
62
+ if (onActiveSectionChange) onActiveSectionChange(scrollInfo);
63
+ };
64
+ $[0] = onActiveSectionChange;
65
+ $[1] = scrolledRatioSpring;
66
+ $[2] = t0;
67
+ } else t0 = $[2];
68
+ useActiveSection(t0);
69
+ let t1;
70
+ if ($[3] !== scrolledRatioSpring || $[4] !== trackingId) {
71
+ t1 = {
72
+ trackingId,
73
+ scrolledRatioSpring
74
+ };
75
+ $[3] = scrolledRatioSpring;
76
+ $[4] = trackingId;
77
+ $[5] = t1;
78
+ } else t1 = $[5];
79
+ return t1;
80
+ }
81
+ function _temp() {
82
+ return new SpringValue(0);
83
+ }
84
+
85
+ //#endregion
86
+ export { useActiveSectionSpring, useSectionScrollSpring };
87
+ //# sourceMappingURL=index.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.mjs","names":["useCallback","useState","useSectionScroll","SpringValue","useSectionScrollSpring","sectionRef","onScroll","t0","options","$","_c","shouldObserve","undefined","scrolledRatioSpring","_temp","t1","scrollInfo","scrolledRatio","set","onSectionScroll","t2","useCallback","useState","useActiveSection","SpringValue","useActiveSectionSpring","onActiveSectionChange","$","_c","scrolledRatioSpring","_temp","trackingId","setTrackingId","t0","scrollInfo","id","scrolledRatio","set","onSectionScroll","t1"],"sources":["../src/hooks/useSectionScrollSpring.ts","../src/hooks/useActiveSectionSpring.ts"],"sourcesContent":["import { useCallback, useState } from \"react\";\n\nimport {\n IntersectionObserverOptions,\n SectionScrollInfo,\n useSectionScroll,\n} from \"@react-scrollytelling/core\";\nimport { SpringValue } from \"@react-spring/web\";\n\n/**\n * Get the Spring value (react-spring) of the section scroll\n * @param sectionRef - The reference to the section element\n * @param shouldObserve - Whether the underlying IntersectionObserver should be active\n * @param onScroll - The callback to track the scroll ratio\n */\nexport function useSectionScrollSpring(\n sectionRef: React.RefObject<Element>,\n onScroll?: (scrollInfo: SectionScrollInfo) => void,\n shouldObserve = true,\n options?: IntersectionObserverOptions\n) {\n // Use state to return a stable SpringValue object\n const [scrolledRatioSpring] = useState(() => new SpringValue(0));\n\n const onSectionScroll = useCallback(\n (scrollInfo: SectionScrollInfo) => {\n const { scrolledRatio } = scrollInfo;\n scrolledRatioSpring.set(scrolledRatio);\n\n if (onScroll) {\n onScroll(scrollInfo);\n }\n },\n [onScroll, scrolledRatioSpring]\n );\n\n useSectionScroll(sectionRef, onSectionScroll, shouldObserve, options);\n\n return { scrolledRatioSpring: scrolledRatioSpring };\n}\n","import { useCallback, useState } from \"react\";\n\nimport {\n ActiveSectionScrollInfo,\n useActiveSection,\n ActiveSectionObserver,\n} from \"@react-scrollytelling/grouped\";\nimport { SpringValue } from \"@react-spring/web\";\n\n/**\n * Watches for all tracked sections to find the section closet to the bottom of the viewport\n * through ScrollytellingProvider.\n * It invokes the onActiveSectionChange when the active section changes.\n * Returns the Spring value (react-spring) of the section scroll.\n * @param onActiveSectionChange - The callback needs to be memoized\n * @returns The trackingId of the active section and the Spring value of the section scroll\n */\nexport function useActiveSectionSpring(\n onActiveSectionChange?: ActiveSectionObserver\n) {\n // Use state to return a stable SpringValue object\n const [scrolledRatioSpring] = useState(() => new SpringValue(0));\n const [trackingId, setTrackingId] = useState<string | null>(null);\n\n const onSectionScroll = useCallback(\n (scrollInfo: ActiveSectionScrollInfo) => {\n const { trackingId: id, scrolledRatio } = scrollInfo;\n setTrackingId(id);\n scrolledRatioSpring.set(scrolledRatio);\n\n if (onActiveSectionChange) {\n onActiveSectionChange(scrollInfo);\n }\n },\n [onActiveSectionChange, scrolledRatioSpring]\n );\n\n useActiveSection(onSectionScroll);\n\n return { trackingId, scrolledRatioSpring };\n}\n"],"mappings":";;;;;;;;;;;;;AAeA,SAAOI,uBAAAC,YAAAC,UAAAC,IAAAC,SAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAGL,MAAAC,gBAAAJ,OAAAK,SAAA,OAAAL;CAIA,MAAA,CAAAM,uBAA8BZ,SAASa,QAAyB;CAAC,IAAAC;AAAA,KAAAN,EAAA,OAAAH,YAAAG,EAAA,OAAAI,qBAAA;AAG/DE,QAAAC,eAAA;GACE,MAAA,EAAAC,kBAA0BD;AAC1BH,uBAAmBK,IAAKD,cAAc;AAEtC,OAAIX,SACFA,UAASU,WAAW;;AAEvBP,IAAA,KAAAH;AAAAG,IAAA,KAAAI;AAAAJ,IAAA,KAAAM;OAAAA,MAAAN,EAAA;AAIHP,kBAAiBG,YAZOU,IAYsBJ,eAAeH,QAAQ;CAAA,IAAAY;AAAA,KAAAX,EAAA,OAAAI,qBAAA;AAE9DO,OAAA,EAAAP,qBAA4C;AAAAJ,IAAA,KAAAI;AAAAJ,IAAA,KAAAW;OAAAA,MAAAX,EAAA;AAAA,QAA5CW;;AAvBF,SAAAN,UAAA;AAAA,QAOwC,IAAIX,YAAY,EAAE;;;;;;;;;;;;;ACLjE,SAAOsB,uBAAAC,uBAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAIL,MAAA,CAAAC,uBAA8BP,SAASQ,MAAyB;CAChE,MAAA,CAAAC,YAAAC,iBAAoCV,SAAwB,KAAK;CAAC,IAAAW;AAAA,KAAAN,EAAA,OAAAD,yBAAAC,EAAA,OAAAE,qBAAA;AAGhEI,QAAAC,eAAA;GACE,MAAA,EAAAH,YAAAI,IAAAC,kBAA0CF;AAC1CF,iBAAcG,GAAG;AACjBN,uBAAmBQ,IAAKD,cAAc;AAEtC,OAAIV,sBACFA,uBAAsBQ,WAAW;;AAEpCP,IAAA,KAAAD;AAAAC,IAAA,KAAAE;AAAAF,IAAA,KAAAM;OAAAA,MAAAN,EAAA;AAIHJ,kBAbwBU,GAaS;CAAA,IAAAM;AAAA,KAAAZ,EAAA,OAAAE,uBAAAF,EAAA,OAAAI,YAAA;AAE1BQ,OAAA;GAAAR;GAAAF;GAAmC;AAAAF,IAAA,KAAAE;AAAAF,IAAA,KAAAI;AAAAJ,IAAA,KAAAY;OAAAA,MAAAZ,EAAA;AAAA,QAAnCY;;AAtBF,SAAAT,QAAA;AAAA,QAIwC,IAAIN,YAAY,EAAE"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@react-scrollytelling/react-spring",
3
- "version": "0.2.1",
3
+ "version": "0.3.0",
4
4
  "description": "> TODO: description",
5
5
  "author": "@hsunpei",
6
6
  "license": "MIT",
@@ -8,24 +8,33 @@
8
8
  "access": "public"
9
9
  },
10
10
  "homepage": "https://github.com/hsunpei/react-scrollytelling#readme",
11
- "main": "dist/index.cjs.js",
12
- "module": "dist/index.es.js",
13
- "types": "./dist/src/index.d.ts",
11
+ "main": "dist/index.cjs",
12
+ "module": "dist/index.mjs",
13
+ "types": "dist/index.d.mts",
14
14
  "sideEffects": false,
15
15
  "files": [
16
16
  "dist"
17
17
  ],
18
+ "exports": {
19
+ ".": {
20
+ "import": {
21
+ "types": "./dist/index.d.mts",
22
+ "default": "./dist/index.mjs"
23
+ },
24
+ "require": {
25
+ "types": "./dist/index.d.cts",
26
+ "default": "./dist/index.cjs"
27
+ }
28
+ }
29
+ },
18
30
  "repository": {
19
31
  "type": "git",
20
- "url": "git+https://github.com/hsunpei/react-scrollytelling.git"
32
+ "url": "git+https://github.com/hsunpei/react-scrollytelling.git",
33
+ "directory": "packages/react-spring"
21
34
  },
22
35
  "scripts": {
23
- "dev": "BUILD_MODE=dev yarn dev:dist",
24
- "dev:dist": "yarn build:dist --watch",
25
- "dev:declarations": "tsc -p . --emitDeclarationOnly --watch --outDir dist_types",
26
- "build": "run-s build:dist build:declarations",
27
- "build:dist": "vite build",
28
- "build:declarations": "tsc -p . --emitDeclarationOnly --outDir dist_types",
36
+ "dev": "tsdown --watch",
37
+ "build": "tsdown",
29
38
  "clean": "rimraf -rf ./dist && rimraf -rf ./dist_types",
30
39
  "test": "jest",
31
40
  "test:watch": "jest --watch"
@@ -34,20 +43,18 @@
34
43
  "url": "https://github.com/hsunpei/react-scrollytelling/issues"
35
44
  },
36
45
  "devDependencies": {
37
- "@testing-library/dom": "^10.4.0",
38
- "@testing-library/jest-dom": "^6.4.8",
39
- "@testing-library/react": "^16.0.0",
40
- "jest": "^29.7.0",
41
- "jest-environment-jsdom": "^29.7.0",
42
- "ts-jest": "^29.2.4",
43
- "vite": "^5.2.11"
46
+ "@testing-library/dom": "catalog:",
47
+ "@testing-library/jest-dom": "catalog:",
48
+ "@testing-library/react": "catalog:",
49
+ "jest": "catalog:",
50
+ "jest-environment-jsdom": "catalog:",
51
+ "ts-jest": "catalog:"
44
52
  },
45
53
  "peerDependencies": {
46
- "@react-scrollytelling/core": "workspace:^",
47
- "@react-scrollytelling/grouped": "workspace:^",
48
- "@react-spring/web": "^10.0.3",
49
- "react": "^19.1.1",
50
- "react-dom": "^19.1.1"
51
- },
52
- "gitHead": "e68bd6fc3cb9fe9b8b65c176166189339d25c4a1"
54
+ "@react-scrollytelling/core": "workspace:*",
55
+ "@react-scrollytelling/grouped": "workspace:*",
56
+ "@react-spring/web": "catalog:",
57
+ "react": "catalog:",
58
+ "react-dom": "catalog:"
59
+ }
53
60
  }
package/dist/index.cjs.js DELETED
@@ -1,2 +0,0 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),S=require("@react-scrollytelling/core"),l=require("@react-spring/web"),a=require("@react-scrollytelling/grouped");function g(r,e,o=!0,s){const c=t.useRef(new l.SpringValue(0)),n=t.useCallback(i=>{const{scrolledRatio:u}=i;c.current.set(u),e&&e(i)},[e]);return S.useSectionScroll(r,n,o,s),{scrolledRatioSpring:c.current}}function d(r){const e=t.useRef(new l.SpringValue(0)),[o,s]=t.useState(null),c=t.useCallback(n=>{const{trackingId:i,scrolledRatio:u}=n;s(i),e.current.set(u),r&&r(n)},[r]);return a.useActiveSection(c),{trackingId:o,scrolledRatioSpring:e.current}}exports.useActiveSectionSpring=d;exports.useSectionScrollSpring=g;
2
- //# sourceMappingURL=index.cjs.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.cjs.js","sources":["../src/hooks/useSectionScrollSpring.ts","../src/hooks/useActiveSectionSpring.ts"],"sourcesContent":["import { useCallback, useRef } from 'react';\n\nimport {\n IntersectionObserverOptions,\n SectionScrollInfo,\n useSectionScroll,\n} from '@react-scrollytelling/core';\nimport { SpringValue } from '@react-spring/web';\n\n/**\n * Get the Spring value (react-spring) of the section scroll\n * @param sectionRef - The reference to the section element\n * @param shouldObserve - Whether the underlying IntersectionObserver should be active\n * @param onScroll - The callback to track the scroll ratio\n */\nexport function useSectionScrollSpring(\n sectionRef: React.RefObject<Element>,\n onScroll?: (scrollInfo: SectionScrollInfo) => void,\n shouldObserve = true,\n options?: IntersectionObserverOptions\n) {\n const scrolledRatioSpringRef = useRef(new SpringValue(0));\n\n const onSectionScroll = useCallback(\n (scrollInfo: SectionScrollInfo) => {\n const { scrolledRatio } = scrollInfo;\n scrolledRatioSpringRef.current.set(scrolledRatio);\n\n if (onScroll) {\n onScroll(scrollInfo);\n }\n },\n [onScroll]\n );\n\n useSectionScroll(sectionRef, onSectionScroll, shouldObserve, options);\n\n return { scrolledRatioSpring: scrolledRatioSpringRef.current };\n}\n","import { useCallback, useRef, useState } from 'react';\n\nimport {\n ActiveSectionScrollInfo,\n useActiveSection,\n ActiveSectionObserver,\n} from '@react-scrollytelling/grouped';\nimport { SpringValue } from '@react-spring/web';\n\n/**\n * Watches for all tracked sections to find the section closet to the bottom of the viewport\n * through ScrollytellingProvider.\n * It invokes the onActiveSectionChange when the active section changes.\n * Returns the Spring value (react-spring) of the section scroll.\n * @param onActiveSectionChange - The callback needs to be memoized\n * @returns The trackingId of the active section and the Spring value of the section scroll\n */\nexport function useActiveSectionSpring(onActiveSectionChange?: ActiveSectionObserver) {\n const scrolledRatioSpringRef = useRef(new SpringValue(0));\n const [trackingId, setTrackingId] = useState<string | null>(null);\n\n const onSectionScroll = useCallback(\n (scrollInfo: ActiveSectionScrollInfo) => {\n const { trackingId: id, scrolledRatio } = scrollInfo;\n setTrackingId(id);\n scrolledRatioSpringRef.current.set(scrolledRatio);\n\n if (onActiveSectionChange) {\n onActiveSectionChange(scrollInfo);\n }\n },\n [onActiveSectionChange]\n );\n\n useActiveSection(onSectionScroll);\n\n return { trackingId, scrolledRatioSpring: scrolledRatioSpringRef.current };\n}\n"],"names":["useSectionScrollSpring","sectionRef","onScroll","shouldObserve","options","scrolledRatioSpringRef","useRef","SpringValue","onSectionScroll","useCallback","scrollInfo","scrolledRatio","useSectionScroll","useActiveSectionSpring","onActiveSectionChange","trackingId","setTrackingId","useState","id","useActiveSection"],"mappings":"2NAeO,SAASA,EACdC,EACAC,EACAC,EAAgB,GAChBC,EACA,CACA,MAAMC,EAAyBC,EAAA,OAAO,IAAIC,EAAAA,YAAY,CAAC,CAAC,EAElDC,EAAkBC,EAAA,YACrBC,GAAkC,CAC3B,KAAA,CAAE,cAAAC,CAAkB,EAAAD,EACHL,EAAA,QAAQ,IAAIM,CAAa,EAE5CT,GACFA,EAASQ,CAAU,CAEvB,EACA,CAACR,CAAQ,CAAA,EAGMU,OAAAA,EAAAA,iBAAAX,EAAYO,EAAiBL,EAAeC,CAAO,EAE7D,CAAE,oBAAqBC,EAAuB,QACvD,CCrBO,SAASQ,EAAuBC,EAA+C,CACpF,MAAMT,EAAyBC,EAAA,OAAO,IAAIC,EAAAA,YAAY,CAAC,CAAC,EAClD,CAACQ,EAAYC,CAAa,EAAIC,WAAwB,IAAI,EAE1DT,EAAkBC,EAAA,YACrBC,GAAwC,CACvC,KAAM,CAAE,WAAYQ,EAAI,cAAAP,CAAA,EAAkBD,EAC1CM,EAAcE,CAAE,EACOb,EAAA,QAAQ,IAAIM,CAAa,EAE5CG,GACFA,EAAsBJ,CAAU,CAEpC,EACA,CAACI,CAAqB,CAAA,EAGxBK,OAAAA,EAAA,iBAAiBX,CAAe,EAEzB,CAAE,WAAAO,EAAY,oBAAqBV,EAAuB,OAAQ,CAC3E"}
package/dist/index.es.js DELETED
@@ -1,29 +0,0 @@
1
- import { useRef as u, useCallback as l, useState as p } from "react";
2
- import { useSectionScroll as a } from "@react-scrollytelling/core";
3
- import { SpringValue as S } from "@react-spring/web";
4
- import { useActiveSection as d } from "@react-scrollytelling/grouped";
5
- function k(t, r, n = !0, c) {
6
- const e = u(new S(0)), o = l(
7
- (i) => {
8
- const { scrolledRatio: s } = i;
9
- e.current.set(s), r && r(i);
10
- },
11
- [r]
12
- );
13
- return a(t, o, n, c), { scrolledRatioSpring: e.current };
14
- }
15
- function w(t) {
16
- const r = u(new S(0)), [n, c] = p(null), e = l(
17
- (o) => {
18
- const { trackingId: i, scrolledRatio: s } = o;
19
- c(i), r.current.set(s), t && t(o);
20
- },
21
- [t]
22
- );
23
- return d(e), { trackingId: n, scrolledRatioSpring: r.current };
24
- }
25
- export {
26
- w as useActiveSectionSpring,
27
- k as useSectionScrollSpring
28
- };
29
- //# sourceMappingURL=index.es.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.es.js","sources":["../src/hooks/useSectionScrollSpring.ts","../src/hooks/useActiveSectionSpring.ts"],"sourcesContent":["import { useCallback, useRef } from 'react';\n\nimport {\n IntersectionObserverOptions,\n SectionScrollInfo,\n useSectionScroll,\n} from '@react-scrollytelling/core';\nimport { SpringValue } from '@react-spring/web';\n\n/**\n * Get the Spring value (react-spring) of the section scroll\n * @param sectionRef - The reference to the section element\n * @param shouldObserve - Whether the underlying IntersectionObserver should be active\n * @param onScroll - The callback to track the scroll ratio\n */\nexport function useSectionScrollSpring(\n sectionRef: React.RefObject<Element>,\n onScroll?: (scrollInfo: SectionScrollInfo) => void,\n shouldObserve = true,\n options?: IntersectionObserverOptions\n) {\n const scrolledRatioSpringRef = useRef(new SpringValue(0));\n\n const onSectionScroll = useCallback(\n (scrollInfo: SectionScrollInfo) => {\n const { scrolledRatio } = scrollInfo;\n scrolledRatioSpringRef.current.set(scrolledRatio);\n\n if (onScroll) {\n onScroll(scrollInfo);\n }\n },\n [onScroll]\n );\n\n useSectionScroll(sectionRef, onSectionScroll, shouldObserve, options);\n\n return { scrolledRatioSpring: scrolledRatioSpringRef.current };\n}\n","import { useCallback, useRef, useState } from 'react';\n\nimport {\n ActiveSectionScrollInfo,\n useActiveSection,\n ActiveSectionObserver,\n} from '@react-scrollytelling/grouped';\nimport { SpringValue } from '@react-spring/web';\n\n/**\n * Watches for all tracked sections to find the section closet to the bottom of the viewport\n * through ScrollytellingProvider.\n * It invokes the onActiveSectionChange when the active section changes.\n * Returns the Spring value (react-spring) of the section scroll.\n * @param onActiveSectionChange - The callback needs to be memoized\n * @returns The trackingId of the active section and the Spring value of the section scroll\n */\nexport function useActiveSectionSpring(onActiveSectionChange?: ActiveSectionObserver) {\n const scrolledRatioSpringRef = useRef(new SpringValue(0));\n const [trackingId, setTrackingId] = useState<string | null>(null);\n\n const onSectionScroll = useCallback(\n (scrollInfo: ActiveSectionScrollInfo) => {\n const { trackingId: id, scrolledRatio } = scrollInfo;\n setTrackingId(id);\n scrolledRatioSpringRef.current.set(scrolledRatio);\n\n if (onActiveSectionChange) {\n onActiveSectionChange(scrollInfo);\n }\n },\n [onActiveSectionChange]\n );\n\n useActiveSection(onSectionScroll);\n\n return { trackingId, scrolledRatioSpring: scrolledRatioSpringRef.current };\n}\n"],"names":["useSectionScrollSpring","sectionRef","onScroll","shouldObserve","options","scrolledRatioSpringRef","useRef","SpringValue","onSectionScroll","useCallback","scrollInfo","scrolledRatio","useSectionScroll","useActiveSectionSpring","onActiveSectionChange","trackingId","setTrackingId","useState","id","useActiveSection"],"mappings":";;;;AAeO,SAASA,EACdC,GACAC,GACAC,IAAgB,IAChBC,GACA;AACA,QAAMC,IAAyBC,EAAO,IAAIC,EAAY,CAAC,CAAC,GAElDC,IAAkBC;AAAA,IACtB,CAACC,MAAkC;AAC3B,YAAA,EAAE,eAAAC,EAAkB,IAAAD;AACH,MAAAL,EAAA,QAAQ,IAAIM,CAAa,GAE5CT,KACFA,EAASQ,CAAU;AAAA,IAEvB;AAAA,IACA,CAACR,CAAQ;AAAA,EAAA;AAGM,SAAAU,EAAAX,GAAYO,GAAiBL,GAAeC,CAAO,GAE7D,EAAE,qBAAqBC,EAAuB;AACvD;ACrBO,SAASQ,EAAuBC,GAA+C;AACpF,QAAMT,IAAyBC,EAAO,IAAIC,EAAY,CAAC,CAAC,GAClD,CAACQ,GAAYC,CAAa,IAAIC,EAAwB,IAAI,GAE1DT,IAAkBC;AAAA,IACtB,CAACC,MAAwC;AACvC,YAAM,EAAE,YAAYQ,GAAI,eAAAP,EAAA,IAAkBD;AAC1C,MAAAM,EAAcE,CAAE,GACOb,EAAA,QAAQ,IAAIM,CAAa,GAE5CG,KACFA,EAAsBJ,CAAU;AAAA,IAEpC;AAAA,IACA,CAACI,CAAqB;AAAA,EAAA;AAGxB,SAAAK,EAAiBX,CAAe,GAEzB,EAAE,YAAAO,GAAY,qBAAqBV,EAAuB,QAAQ;AAC3E;"}
@@ -1,3 +0,0 @@
1
- export * from './useSectionScrollSpring';
2
- export * from './useActiveSectionSpring';
3
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC"}
@@ -1,16 +0,0 @@
1
- import { SpringValue } from '@react-spring/web';
2
- import { ActiveSectionObserver } from '@react-scrollytelling/grouped';
3
-
4
- /**
5
- * Watches for all tracked sections to find the section closet to the bottom of the viewport
6
- * through ScrollytellingProvider.
7
- * It invokes the onActiveSectionChange when the active section changes.
8
- * Returns the Spring value (react-spring) of the section scroll.
9
- * @param onActiveSectionChange - The callback needs to be memoized
10
- * @returns The trackingId of the active section and the Spring value of the section scroll
11
- */
12
- export declare function useActiveSectionSpring(onActiveSectionChange?: ActiveSectionObserver): {
13
- trackingId: string | null;
14
- scrolledRatioSpring: SpringValue<number>;
15
- };
16
- //# sourceMappingURL=useActiveSectionSpring.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useActiveSectionSpring.d.ts","sourceRoot":"","sources":["../../../src/hooks/useActiveSectionSpring.ts"],"names":[],"mappings":"AAEA,OAAO,EAGL,qBAAqB,EACtB,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEhD;;;;;;;GAOG;AACH,wBAAgB,sBAAsB,CAAC,qBAAqB,CAAC,EAAE,qBAAqB;;;EAoBnF"}
@@ -1,13 +0,0 @@
1
- import { SpringValue } from '@react-spring/web';
2
- import { IntersectionObserverOptions, SectionScrollInfo } from '@react-scrollytelling/core';
3
-
4
- /**
5
- * Get the Spring value (react-spring) of the section scroll
6
- * @param sectionRef - The reference to the section element
7
- * @param shouldObserve - Whether the underlying IntersectionObserver should be active
8
- * @param onScroll - The callback to track the scroll ratio
9
- */
10
- export declare function useSectionScrollSpring(sectionRef: React.RefObject<Element>, onScroll?: (scrollInfo: SectionScrollInfo) => void, shouldObserve?: boolean, options?: IntersectionObserverOptions): {
11
- scrolledRatioSpring: SpringValue<number>;
12
- };
13
- //# sourceMappingURL=useSectionScrollSpring.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useSectionScrollSpring.d.ts","sourceRoot":"","sources":["../../../src/hooks/useSectionScrollSpring.ts"],"names":[],"mappings":";AAEA,OAAO,EACL,2BAA2B,EAC3B,iBAAiB,EAElB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEhD;;;;;GAKG;AACH,wBAAgB,sBAAsB,CACpC,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,EACpC,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,iBAAiB,KAAK,IAAI,EAClD,aAAa,UAAO,EACpB,OAAO,CAAC,EAAE,2BAA2B;;EAmBtC"}
@@ -1,2 +0,0 @@
1
- export * from './hooks';
2
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC"}