@react-scrollytelling/react-spring 0.3.0 → 0.3.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.
Files changed (6) hide show
  1. package/dist/index.mjs +1 -1
  2. package/dist/index.mjs.map +1 -1
  3. package/package.json +5 -11
  4. package/dist/index.cjs +0 -88
  5. package/dist/index.d.cts +0 -31
  6. package/dist/index.d.cts.map +0 -1
package/dist/index.mjs CHANGED
@@ -57,7 +57,7 @@ function useActiveSectionSpring(onActiveSectionChange) {
57
57
  if ($[0] !== onActiveSectionChange || $[1] !== scrolledRatioSpring) {
58
58
  t0 = (scrollInfo) => {
59
59
  const { trackingId: id, scrolledRatio } = scrollInfo;
60
- setTrackingId(id);
60
+ setTrackingId((prev) => prev === id ? prev : id);
61
61
  scrolledRatioSpring.set(scrolledRatio);
62
62
  if (onActiveSectionChange) onActiveSectionChange(scrollInfo);
63
63
  };
package/dist/index.mjs.map CHANGED
@@ -1 +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"}
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","prev","set","onSectionScroll","t1"],"sources":["../src/hooks/useSectionScrollSpring.ts","../src/hooks/useActiveSectionSpring.ts"],"sourcesContent":["import { useCallback, useState } from \"react\";\n\nimport {\n type IntersectionObserverOptions,\n type 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 type ActiveSectionScrollInfo,\n useActiveSection,\n type 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((prev) => (prev === id ? prev : 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,kBAAcK,SAAWA,SAASF,KAATE,OAAAF,GAAyB;AAClDN,uBAAmBS,IAAKF,cAAc;AAEtC,OAAIV,sBACFA,uBAAsBQ,WAAW;;AAEpCP,IAAA,KAAAD;AAAAC,IAAA,KAAAE;AAAAF,IAAA,KAAAM;OAAAA,MAAAN,EAAA;AAIHJ,kBAbwBU,GAaS;CAAA,IAAAO;AAAA,KAAAb,EAAA,OAAAE,uBAAAF,EAAA,OAAAI,YAAA;AAE1BS,OAAA;GAAAT;GAAAF;GAAmC;AAAAF,IAAA,KAAAE;AAAAF,IAAA,KAAAI;AAAAJ,IAAA,KAAAa;OAAAA,MAAAb,EAAA;AAAA,QAAnCa;;AAtBF,SAAAV,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.3.0",
3
+ "version": "0.3.1",
4
4
  "description": "> TODO: description",
5
5
  "author": "@hsunpei",
6
6
  "license": "MIT",
@@ -8,8 +8,8 @@
8
8
  "access": "public"
9
9
  },
10
10
  "homepage": "https://github.com/hsunpei/react-scrollytelling#readme",
11
- "main": "dist/index.cjs",
12
- "module": "dist/index.mjs",
11
+ "type": "module",
12
+ "main": "dist/index.mjs",
13
13
  "types": "dist/index.d.mts",
14
14
  "sideEffects": false,
15
15
  "files": [
@@ -17,14 +17,8 @@
17
17
  ],
18
18
  "exports": {
19
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
- }
20
+ "types": "./dist/index.d.mts",
21
+ "import": "./dist/index.mjs"
28
22
  }
29
23
  },
30
24
  "repository": {
package/dist/index.cjs DELETED
@@ -1,88 +0,0 @@
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;
package/dist/index.d.cts DELETED
@@ -1,31 +0,0 @@
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
package/dist/index.d.cts.map DELETED
@@ -1 +0,0 @@
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"}