@eeacms/countup
Version:
React component and hook to animate counting up or down to a number
2 lines (1 loc) • 3.26 kB
JavaScript
import{useState as K,useRef as O,useCallback as Q}from"react";import{useEffect as W,useLayoutEffect as X}from"react";var N=Object.defineProperty,z=Object.defineProperties,G=Object.getOwnPropertyDescriptors,j=Object.getOwnPropertySymbols,J=Object.prototype.hasOwnProperty,H=Object.prototype.propertyIsEnumerable,V=(t,e,r)=>e in t?N(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,F=(t,e)=>{for(var r in e||(e={}))J.call(e,r)&&V(t,r,e[r]);if(j)for(var r of j(e))H.call(e,r)&&V(t,r,e[r]);return t},x=(t,e)=>z(t,G(e)),h=typeof window=="undefined"?W:X,q=({isPlaying:t,duration:e,startAt:r=0,updateInterval:n=0,onComplete:R,onUpdate:P})=>{let[d,U]=K(r),g=O(r*-1e3),l=O(null),y=O(null),b=O(null),i=O({elapsedTimeRef:0,startAtRef:r,durationRef:e,updateIntervalRef:n});i.current=x(F({},i.current),{durationRef:e,updateIntervalRef:n});let o=f=>{let s=f/1e3;if(y.current===null){y.current=s,l.current=requestAnimationFrame(o);return}let{durationRef:p,elapsedTimeRef:E,updateIntervalRef:I,startAtRef:a}=i.current,u=s-y.current,m=E+u;y.current=s,i.current=x(F({},i.current),{elapsedTimeRef:m});let v=a+(I===0?m:(m/I|0)*I),A=a+m,c=typeof p=="number"&&A>=p;U(c?p:v),c||(l.current=requestAnimationFrame(o))},C=()=>{l.current&&cancelAnimationFrame(l.current),b.current&&clearTimeout(b.current),y.current=null},w=Q(f=>{let s=typeof f=="number"?f:r;C(),i.current=x(F({},i.current),{elapsedTimeRef:0,startAtRef:s}),U(s),t&&(l.current=requestAnimationFrame(o))},[t,r]);return h(()=>{if(P==null||P(d),e&&d>=e){g.current+=e*1e3;let{shouldRepeat:f=!1,delay:s=0,newStartAt:p}=(R==null?void 0:R(g.current/1e3))||{};f&&(b.current=setTimeout(()=>w(p),s*1e3))}},[d,e]),h(()=>(t&&(l.current=requestAnimationFrame(o)),C),[t]),{elapsedTime:d,reset:w}};import S,{useEffect as L}from"react";var Y=(t,e,r,n)=>(t/=n,t--,r*(t*t*t+1)+e),Z=(t,e)=>{if(typeof t=="number")return typeof e=="number"?e:2},$=(t,e)=>t.replace(/\B(?=(\d{3})+(?!\d))/g,e),k=t=>(t.toString().split(".")[1]||"").length,_=(t,e)=>{let r=k(t),n=k(e||1);return r>=n?r:n},D=({isCounting:t=!1,start:e=0,end:r,duration:n,decimalPlaces:R=_(e,r),decimalSeparator:P=".",thousandsSeparator:d="",onComplete:U,formatter:g,updateInterval:l,useIntersection:y=!0,onUpdate:b})=>{function i(a){let[u,m]=S.useState(!1),[v,A]=S.useState(!1);return L(()=>{A(!0)},[]),S.useEffect(()=>{if(u||!v)return;let c=new IntersectionObserver(([M])=>{m(u===!1?M.isIntersecting:!0)}),T=a.current;return T&&c.observe(T),()=>{c.disconnect()}},[a,u,v]),u}let o=Z(r,n),C=S.useRef(null),w=i(C),[f,s]=S.useState(!1);L(()=>{w===!0&&s(!0)},[w]);let p=a=>{let u;if(o===0&&typeof r=="number")u=r;else if(typeof r=="number"&&typeof o=="number"){let c=a<o?a:o;u=Y(c,e,r-e,o)}else u=e+a;if(typeof g=="function")return g(u);if(R===0){let c=Math.round(u).toString();return $(c,d)}let[m,v]=u.toFixed(R).split(".");return`${$(m,d)}${P}${v}`},{elapsedTime:E,reset:I}=q({isPlaying:f===!1&&y===!0?!1:t,duration:o,onComplete:U,updateInterval:l,onUpdate:typeof b=="function"?a=>b(p(a)):void 0});return{value:p(E),reset:I,ref:C}};import ee from"react";var B=({children:t,as:e="div",...r})=>{let n=D(r);return ee.createElement(e,{ref:n.ref},typeof t=="function"?t(n):n.value)};B.displayName="CountUp";var te=t=>t,fe=te;export{B as CountUp,fe as default,D as useCountUp};