@react-scrollytelling/react-spring 0.0.1 → 0.1.1

package/dist/index.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react"),d=require("@react-spring/web");function f(){if(typeof window=="undefined")return{scrollTop:0,scrollBottom:0,windowHeight:10};const e=window.scrollY||document.documentElement.scrollTop,n=window.innerHeight||document.documentElement.clientHeight,o=e+n;return{scrollTop:e,scrollBottom:o,windowHeight:n}}function g(e){return e<0?0:e>1?1:e}const w={};function m(e,n=w,o=!0,t){const[l,s]=i.useState(!1),c=i.useRef(null),r=i.useCallback(()=>{c.current&&c.current.disconnect()},[]);return i.useEffect(()=>{if(window&&IntersectionObserver&&o){c.current=new IntersectionObserver(([a])=>{s(a.isIntersecting),t&&t(a,r)},n);const u=e.current;return u&&c.current.observe(e.current),()=>{c.current&&u&&c.current.unobserve(u)}}},[e,n,o,t]),{isIntersecting:l,disconnect:r}}function b(e){const n=i.useRef(null),o=i.useCallback((...t)=>{e(...t),n.current=null},[e]);return i.useEffect(()=>()=>{n.current&&cancelAnimationFrame(n.current)},[]),i.useCallback((...t)=>{const l=()=>o(...t);n.current||(n.current=requestAnimationFrame(l))},[o])}function S(e,n){var o;const t=(o=e.current)==null?void 0:o.getBoundingClientRect();if(!t)return{scrolledRatio:0,scrollBottom:0,distance:1/0,isIntersecting:n};const{scrollTop:l,scrollBottom:s}=f(),c=t.top+l,r=s-c;return{scrolledRatio:g(r/t.height),scrollBottom:s,distance:r,isIntersecting:n}}function p(e,n,o=!0,t){const l=i.useCallback(r=>{const u=S(e,r);n(u)},[e,n]),s=b(l),c=i.useCallback(({isIntersecting:r})=>{s(r),r?window.addEventListener("scroll",s.bind(null,r)):window.removeEventListener("scroll",s.bind(null,r))},[s]);m(e,t,o,c)}function v(e,n,o=!0,t){const l=i.useRef(new d.SpringValue(0)),s=i.useCallback(c=>{const{scrolledRatio:r}=c;console.log("onSectionScroll",r),l.current.set(r),n&&n(c)},[n]);return p(e,s,o,t),{scrolledRatioSpring:l.current}}exports.useSectionScrollSpring=v;
+"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;
 //# sourceMappingURL=index.cjs.js.map

package/dist/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../core/dist/index.es.js","../src/hooks/useSectionScrollSpring.ts"],"sourcesContent":["import { useState as a, useRef as d, useCallback as u, useEffect as g } from \"react\";\nfunction w() {\n  if (typeof window == \"undefined\")\n    return {\n      scrollTop: 0,\n      scrollBottom: 0,\n      windowHeight: 10\n    };\n  const t = window.scrollY || document.documentElement.scrollTop, n = window.innerHeight || document.documentElement.clientHeight, e = t + n;\n  return {\n    scrollTop: t,\n    scrollBottom: e,\n    windowHeight: n\n  };\n}\nfunction S(t) {\n  return t < 0 ? 0 : t > 1 ? 1 : t;\n}\nconst m = {};\nfunction I(t, n = m, e = !0, r) {\n  const [s, i] = a(!1), o = d(null), c = u(() => {\n    o.current && o.current.disconnect();\n  }, []);\n  return g(() => {\n    if (window && IntersectionObserver && e) {\n      o.current = new IntersectionObserver(([f]) => {\n        i(f.isIntersecting), r && r(f, c);\n      }, n);\n      const l = t.current;\n      return l && o.current.observe(t.current), () => {\n        o.current && l && o.current.unobserve(l);\n      };\n    }\n  }, [t, n, e, r]), { isIntersecting: s, disconnect: c };\n}\nfunction R(t, n, e) {\n  const [r, s] = a(!1), i = u((c) => {\n    s(c.isIntersecting);\n  }, []), { disconnect: o } = I(t, n, e, i);\n  return { isIntersecting: r, disconnect: o };\n}\nfunction E(t, n = !1, e = m) {\n  const r = d(!1), [s, i] = a(!1), o = u(\n    (c, l) => {\n      const f = c.isIntersecting;\n      i(f), n && !r.current && f && l();\n    },\n    [n]\n  );\n  return I(t, e, !0, o), { isIntersecting: s };\n}\nfunction v(t) {\n  const n = d(null), e = u(\n    (...r) => {\n      t(...r), n.current = null;\n    },\n    [t]\n  );\n  return g(() => () => {\n    n.current && cancelAnimationFrame(n.current);\n  }, []), u(\n    (...r) => {\n      const s = () => e(...r);\n      n.current || (n.current = requestAnimationFrame(s));\n    },\n    [e]\n  );\n}\nfunction T(t, n) {\n  var l;\n  const e = (l = t.current) == null ? void 0 : l.getBoundingClientRect();\n  if (!e)\n    return { scrolledRatio: 0, scrollBottom: 0, distance: 1 / 0, isIntersecting: n };\n  const { scrollTop: r, scrollBottom: s } = w(), i = e.top + r, o = s - i;\n  return { scrolledRatio: S(o / e.height), scrollBottom: s, distance: o, isIntersecting: n };\n}\nfunction b(t, n, e = !0, r) {\n  const s = u(\n    (c) => {\n      const l = T(t, c);\n      n(l);\n    },\n    [t, n]\n  ), i = v(s), o = u(\n    ({ isIntersecting: c }) => {\n      i(c), c ? window.addEventListener(\"scroll\", i.bind(null, c)) : window.removeEventListener(\"scroll\", i.bind(null, c));\n    },\n    [i]\n  );\n  I(t, r, e, o);\n}\nfunction h(t, n = !0, e) {\n  const [r, s] = a(0), [i, o] = a(!1), c = u(\n    ({ scrolledRatio: l, isIntersecting: f }) => {\n      s(l), o(f);\n    },\n    []\n  );\n  return b(t, c, n, e), { scrolledRatio: r, isIntersecting: i };\n}\nexport {\n  m as DEFAULT_INTERSECTION_OBS_OPTIONS,\n  S as clampScrolledRatio,\n  w as getScrollPosition,\n  T as getSectionScrollInfo,\n  I as useIntersectionObserver,\n  R as useIntersectionObserverState,\n  E as useIntersectionReveal,\n  v as useRafThrottle,\n  b as useSectionScroll,\n  h as useSectionScrollState\n};\n//# sourceMappingURL=index.es.js.map\n","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 state 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      console.log('onSectionScroll', scrolledRatio);\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"],"names":["w","t","e","S","m","I","r","s","i","a","o","d","c","u","g","f","l","v","T","b","useSectionScrollSpring","sectionRef","onScroll","shouldObserve","options","scrolledRatioSpringRef","useRef","SpringValue","onSectionScroll","useCallback","scrollInfo","scrolledRatio","useSectionScroll"],"mappings":"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"}
+{"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

@@ -1,90 +1,29 @@
-import { useCallback as l, useState as a, useRef as d, useEffect as w } from "react";
-import { SpringValue as f } from "@react-spring/web";
-function g() {
-  if (typeof window == "undefined")
-    return {
-      scrollTop: 0,
-      scrollBottom: 0,
-      windowHeight: 10
-    };
-  const n = window.scrollY || document.documentElement.scrollTop, e = window.innerHeight || document.documentElement.clientHeight, o = n + e;
-  return {
-    scrollTop: n,
-    scrollBottom: o,
-    windowHeight: e
-  };
-}
-function p(n) {
-  return n < 0 ? 0 : n > 1 ? 1 : n;
-}
-const v = {};
-function S(n, e = v, o = !0, t) {
-  const [s, i] = a(!1), c = d(null), r = l(() => {
-    c.current && c.current.disconnect();
-  }, []);
-  return w(() => {
-    if (window && IntersectionObserver && o) {
-      c.current = new IntersectionObserver(([m]) => {
-        i(m.isIntersecting), t && t(m, r);
-      }, e);
-      const u = n.current;
-      return u && c.current.observe(n.current), () => {
-        c.current && u && c.current.unobserve(u);
-      };
-    }
-  }, [n, e, o, t]), { isIntersecting: s, disconnect: r };
-}
-function b(n) {
-  const e = d(null), o = l(
-    (...t) => {
-      n(...t), e.current = null;
-    },
-    [n]
-  );
-  return w(() => () => {
-    e.current && cancelAnimationFrame(e.current);
-  }, []), l(
-    (...t) => {
-      const s = () => o(...t);
-      e.current || (e.current = requestAnimationFrame(s));
-    },
-    [o]
-  );
-}
-function R(n, e) {
-  var o;
-  const t = (o = n.current) == null ? void 0 : o.getBoundingClientRect();
-  if (!t)
-    return { scrolledRatio: 0, scrollBottom: 0, distance: 1 / 0, isIntersecting: e };
-  const { scrollTop: s, scrollBottom: i } = g(), c = t.top + s, r = i - c;
-  return { scrolledRatio: p(r / t.height), scrollBottom: i, distance: r, isIntersecting: e };
-}
-function I(n, e, o = !0, t) {
-  const s = l(
-    (r) => {
-      const u = R(n, r);
-      e(u);
-    },
-    [n, e]
-  ), i = b(s), c = l(
-    ({ isIntersecting: r }) => {
-      i(r), r ? window.addEventListener("scroll", i.bind(null, r)) : window.removeEventListener("scroll", i.bind(null, r));
+import { useRef as u, useCallback as l, useState as p } from "react";
+import { useSectionScroll as a } from "@react-scrollytelling/core";
+import { SpringValue as S } from "@react-spring/web";
+import { useActiveSection as d } from "@react-scrollytelling/grouped";
+function k(t, r, n = !0, c) {
+  const e = u(new S(0)), o = l(
+    (i) => {
+      const { scrolledRatio: s } = i;
+      e.current.set(s), r && r(i);
     },
-    [i]
+    [r]
   );
-  S(n, t, o, c);
+  return a(t, o, n, c), { scrolledRatioSpring: e.current };
 }
-function E(n, e, o = !0, t) {
-  const s = d(new f(0)), i = l(
-    (c) => {
-      const { scrolledRatio: r } = c;
-      console.log("onSectionScroll", r), s.current.set(r), e && e(c);
+function w(t) {
+  const r = u(new S(0)), [n, c] = p(null), e = l(
+    (o) => {
+      const { trackingId: i, scrolledRatio: s } = o;
+      c(i), r.current.set(s), t && t(o);
     },
-    [e]
+    [t]
   );
-  return I(n, i, o, t), { scrolledRatioSpring: s.current };
+  return d(e), { trackingId: n, scrolledRatioSpring: r.current };
 }
 export {
-  E as useSectionScrollSpring
+  w as useActiveSectionSpring,
+  k as useSectionScrollSpring
 };
 //# sourceMappingURL=index.es.js.map

package/dist/index.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es.js","sources":["../../core/dist/index.es.js","../src/hooks/useSectionScrollSpring.ts"],"sourcesContent":["import { useState as a, useRef as d, useCallback as u, useEffect as g } from \"react\";\nfunction w() {\n  if (typeof window == \"undefined\")\n    return {\n      scrollTop: 0,\n      scrollBottom: 0,\n      windowHeight: 10\n    };\n  const t = window.scrollY || document.documentElement.scrollTop, n = window.innerHeight || document.documentElement.clientHeight, e = t + n;\n  return {\n    scrollTop: t,\n    scrollBottom: e,\n    windowHeight: n\n  };\n}\nfunction S(t) {\n  return t < 0 ? 0 : t > 1 ? 1 : t;\n}\nconst m = {};\nfunction I(t, n = m, e = !0, r) {\n  const [s, i] = a(!1), o = d(null), c = u(() => {\n    o.current && o.current.disconnect();\n  }, []);\n  return g(() => {\n    if (window && IntersectionObserver && e) {\n      o.current = new IntersectionObserver(([f]) => {\n        i(f.isIntersecting), r && r(f, c);\n      }, n);\n      const l = t.current;\n      return l && o.current.observe(t.current), () => {\n        o.current && l && o.current.unobserve(l);\n      };\n    }\n  }, [t, n, e, r]), { isIntersecting: s, disconnect: c };\n}\nfunction R(t, n, e) {\n  const [r, s] = a(!1), i = u((c) => {\n    s(c.isIntersecting);\n  }, []), { disconnect: o } = I(t, n, e, i);\n  return { isIntersecting: r, disconnect: o };\n}\nfunction E(t, n = !1, e = m) {\n  const r = d(!1), [s, i] = a(!1), o = u(\n    (c, l) => {\n      const f = c.isIntersecting;\n      i(f), n && !r.current && f && l();\n    },\n    [n]\n  );\n  return I(t, e, !0, o), { isIntersecting: s };\n}\nfunction v(t) {\n  const n = d(null), e = u(\n    (...r) => {\n      t(...r), n.current = null;\n    },\n    [t]\n  );\n  return g(() => () => {\n    n.current && cancelAnimationFrame(n.current);\n  }, []), u(\n    (...r) => {\n      const s = () => e(...r);\n      n.current || (n.current = requestAnimationFrame(s));\n    },\n    [e]\n  );\n}\nfunction T(t, n) {\n  var l;\n  const e = (l = t.current) == null ? void 0 : l.getBoundingClientRect();\n  if (!e)\n    return { scrolledRatio: 0, scrollBottom: 0, distance: 1 / 0, isIntersecting: n };\n  const { scrollTop: r, scrollBottom: s } = w(), i = e.top + r, o = s - i;\n  return { scrolledRatio: S(o / e.height), scrollBottom: s, distance: o, isIntersecting: n };\n}\nfunction b(t, n, e = !0, r) {\n  const s = u(\n    (c) => {\n      const l = T(t, c);\n      n(l);\n    },\n    [t, n]\n  ), i = v(s), o = u(\n    ({ isIntersecting: c }) => {\n      i(c), c ? window.addEventListener(\"scroll\", i.bind(null, c)) : window.removeEventListener(\"scroll\", i.bind(null, c));\n    },\n    [i]\n  );\n  I(t, r, e, o);\n}\nfunction h(t, n = !0, e) {\n  const [r, s] = a(0), [i, o] = a(!1), c = u(\n    ({ scrolledRatio: l, isIntersecting: f }) => {\n      s(l), o(f);\n    },\n    []\n  );\n  return b(t, c, n, e), { scrolledRatio: r, isIntersecting: i };\n}\nexport {\n  m as DEFAULT_INTERSECTION_OBS_OPTIONS,\n  S as clampScrolledRatio,\n  w as getScrollPosition,\n  T as getSectionScrollInfo,\n  I as useIntersectionObserver,\n  R as useIntersectionObserverState,\n  E as useIntersectionReveal,\n  v as useRafThrottle,\n  b as useSectionScroll,\n  h as useSectionScrollState\n};\n//# sourceMappingURL=index.es.js.map\n","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 state 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      console.log('onSectionScroll', scrolledRatio);\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"],"names":["w","t","n","e","S","m","I","r","a","o","d","c","u","g","f","l","v","T","s","i","b","useSectionScrollSpring","sectionRef","onScroll","shouldObserve","options","scrolledRatioSpringRef","useRef","SpringValue","onSectionScroll","useCallback","scrollInfo","scrolledRatio","useSectionScroll"],"mappings":"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"}
+{"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;"}

package/dist/src/hooks/index.d.ts

@@ -1,2 +1,3 @@
 export * from './useSectionScrollSpring';
+export * from './useActiveSectionSpring';
 //# sourceMappingURL=index.d.ts.map

package/dist/src/hooks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC"}

package/dist/src/hooks/useActiveSectionSpring.d.ts

@@ -0,0 +1,16 @@
+import { SpringValue } from '@react-spring/web';
+import { ActiveSectionObserver } from '@react-scrollytelling/grouped';
+
+/**
+ * Watches for all tracked sections to find the section closet to the bottom of the viewport
+ * through ScrollytellingProvider.
+ * It invokes the onActiveSectionChange when the active section changes.
+ * Returns the Spring value (react-spring) of the section scroll.
+ * @param onActiveSectionChange - The callback needs to be memoized
+ * @returns The trackingId of the active section and the Spring value of the section scroll
+ */
+export declare function useActiveSectionSpring(onActiveSectionChange?: ActiveSectionObserver): {
+    trackingId: string | null;
+    scrolledRatioSpring: SpringValue<number>;
+};
+//# sourceMappingURL=useActiveSectionSpring.d.ts.map

package/dist/src/hooks/useActiveSectionSpring.d.ts.map

@@ -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"}

package/dist/src/hooks/useSectionScrollSpring.d.ts

@@ -2,7 +2,7 @@ import { SpringValue } from '@react-spring/web';
 import { IntersectionObserverOptions, SectionScrollInfo } from '@react-scrollytelling/core';
 
 /**
- * Get the state of the section scroll
+ * Get the Spring value (react-spring) of the section scroll
  * @param sectionRef - The reference to the section element
  * @param shouldObserve - Whether the underlying IntersectionObserver should be active
  * @param onScroll - The callback to track the scroll ratio

package/dist/src/hooks/useSectionScrollSpring.d.ts.map

@@ -1 +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;;EAoBtC"}
+{"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-scrollytelling/react-spring",
-  "version": "0.0.1",
+  "version": "0.1.1",
   "description": "> TODO: description",
   "author": "@hsunpei",
   "license": "MIT",
@@ -43,9 +43,11 @@
     "vite": "^5.2.11"
   },
   "peerDependencies": {
+    "@react-scrollytelling/core": "workspace:^",
+    "@react-scrollytelling/grouped": "workspace:^",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-spring": "^9.7.5"
   },
-  "gitHead": "0755e926c96e557be7055da7d8174fe94ffbb3de"
+  "gitHead": "b4dc4bd312e4d1d3de0f344764b9b67dadac18a8"
 }