@speaker-ender/react-scrollr/dist/index.esm.js

React tools for scroll animations

import{useClientHook as L}from"@speaker-ender/react-ssr-tools";import g,{createContext as j,useCallback as v,useContext as N,useEffect as I,useRef as F,useState as q}from"react";var k=j(null),A=t=>{let r=L(),[o,s]=q(null),n=F([]),a=v(e=>{o&&o.observe(e.element),n.current=[...n.current,e]},[o,n.current]),i=v(e=>{let c=n.current.find(l=>l.callback===e.callback);!!c&&!!o&&o.unobserve(c.element),n.current=n.current.filter(l=>l!==c)},[o,n.current]),m=v((e,c)=>{e.forEach(l=>{let b=l.target,u=n.current.find(f=>f.element==b);u&&u.callback(l.isIntersecting,l.intersectionRatio)})},[n.current]);return I(()=>{!!n&&!!o&&n.current.forEach(e=>o.observe(e.element))},[o]),I(()=>{if(!!r&&!o){let e={root:t.root?t.root.current:null,rootMargin:t.rootMargin||"-90px 0px -10% 0px",threshold:t.threshold||[0]};s(new IntersectionObserver(m,e))}return()=>{o&&o.disconnect()}},[r]),{inViewObserver:o,registerInViewElement:a,unregisterInViewElement:i}},p=()=>{let t=N(k);if(!t)throw new Error("Observer Context used outside of ObserverContext.Provider");return t},D=t=>{let r=A(t);return g.createElement(k.Provider,{value:r},t.children)};import z,{createContext as B,useContext as G,useEffect as O,useRef as y,useState as J}from"react";import{scrollTopDistance as K,hasWindow as Q}from"@speaker-ender/js-measure";import{useClientHook as U,useEventCallback as V}from"@speaker-ender/react-ssr-tools";import{useCallback as w,useEffect as W,useRef as S}from"react";var C=t=>{let r=S();return W(()=>{r.current=t},[t]),r.current},E=t=>{let r=S(t),o=w(n=>{r.current=[...r.current,n]},[r.current]),s=w(n=>{r.current=r.current.filter(a=>a!==n)},[r.current]);return[o,s,r]};var T=B(null),R=(t,r)=>Q?{currentPosition:r?r.scrollTop:K(),prevPosition:t}:void 0,X=({withContext:t})=>{let r=U(),o=y(!1),s=y(R()),[n,a]=J(),[i,m,e]=E([]),c=V(()=>{let b=R(s.current&&s.current.currentPosition,n);b?.currentPosition!==s.current?.currentPosition?(e.current.map(u=>u(b?b.currentPosition:0,b?b.prevPosition:0)),s.current=b):o.current=!1,o.current&&window.requestAnimationFrame(c)},[s.current,e]),l=V(()=>{!o.current&&r&&t&&(t||n)&&(o.current=!0,window.requestAnimationFrame(c))},[r]);return O(()=>(r&&n&&n.addEventListener("scroll",l),()=>{n&&n.removeEventListener("scroll",l)}),[r,n]),O(()=>(r&&t&&window.addEventListener("scroll",l),()=>{o.current=!1,window.removeEventListener("scroll",l)}),[r]),[s,i,m,a]},Y=()=>{let t=G(T);if(!t)throw new Error("Scroll Context used outside of ScrollContext.Provider");return t},Z=t=>{let r=X({withContext:!0,...t});return z.createElement(T.Provider,{value:r},t.children)};import*as h from"react";import{useCallback as _}from"react";import{useEffect as M,useRef as P}from"react";import{useClientHook as $,useEventCallback as ee}from"@speaker-ender/react-ssr-tools";var x=(t=.2,r,o,s)=>{let n=$(),{registerInViewElement:a,unregisterInViewElement:i}=p(),m=P(!1),e=P(null),c=C(e.current),l=ee((u,f)=>{let d=f>=t&&u;if(d!==m.current){if(d){if(e.current)switch(s){case"fade-in":e.current.style.opacity="1";break;case"fade-side":e.current.style.opacity="1",e.current.style.transform="translate3d(0px, 0, 0)";break;case"fade-up":e.current.style.opacity="1",e.current.style.transform="translate3d(0, 0px, 0)";break;default:e.current.style.opacity="1";break}}else if(e.current)switch(s){case"fade-in":e.current.style.opacity="0";break;case"fade-side":e.current.style.opacity="0",e.current.style.transform="translate3d(-20px, 0, 0)";break;case"fade-up":e.current.style.opacity="0",e.current.style.transform="translate3d(0, 20px, 0)";break;default:e.current.style.opacity="0";break}m.current=d}o&&o(u,f),!!d&&!!r&&!!i&&i({element:e.current||c,callback:l})},[m.current,i,e.current,c]),b=_(u=>{e.current=u},[]);return M(()=>(!!n&&!!a&&a({element:e.current,callback:l}),()=>{i&&i({element:c,callback:l})}),[n,e.current]),M(()=>()=>{i&&i({element:e.current||c,callback:l})},[]),[b]};var te=t=>{let[r]=x(t.threshold,t.untrackOnCallback,t.callback,t.transitionStyle);return h.createElement("div",{style:{transition:"opacity 350ms ease-in-out, transform 350ms ease-in-out",opacity:t.transitionStyle==="none"?"1":"0"},ref:r},t.children)};import re,{useCallback as ne}from"react";import{useEffect as H,useRef as oe,useState as le}from"react";import{useClientHook as ce}from"@speaker-ender/react-ssr-tools";var se=(t=.2,r,o)=>{let s=ce(),{registerInViewElement:n,unregisterInViewElement:a}=p(),[i,m]=le(!1),e=oe(null),c=C(e.current),l=re.useCallback((u,f)=>{let d=f>=t&&u;m(d),o&&o(u,f),!!d&&!!r&&!!a&&a({element:e.current||c,callback:l})},[m,i,a,e.current,c]),b=ne(u=>{e.current=u},[]);return H(()=>(!!s&&!!n&&n({element:e.current,callback:l}),()=>{a&&a({element:c,callback:l})}),[s,e.current]),H(()=>()=>{a&&a({element:e.current||c,callback:l})},[]),[b,i]};export{te as InViewComponent,D as ObserverContextProvider,Z as ScrollContextProvider,se as useInViewState,x as useInViewTransition,p as useObserverContext,Y as useScrollContext};
//# sourceMappingURL=index.esm.js.map