use-elapsed-time/lib/index.module.js

React hook to measure elapsed time using requestAnimationFrame

import{useState as M,useRef as u,useCallback as O}from"react";import{useEffect as w,useLayoutEffect as B}from"react";var E=typeof window=="undefined"?w:B;var V=({isPlaying:s,duration:e,startAt:c=0,updateInterval:m=0,onComplete:p,onUpdate:f})=>{let[i,R]=M(c),T=u(0),b=u(c),x=u(c*-1e3),t=u(null),o=u(null),d=u(null),l=n=>{let r=n/1e3;if(o.current===null){o.current=r,t.current=requestAnimationFrame(l);return}let y=r-o.current,a=T.current+y;o.current=r,T.current=a;let q=b.current+(m===0?a:(a/m|0)*m),F=b.current+a,h=typeof e=="number"&&F>=e;R(h?e:q),h||(t.current=requestAnimationFrame(l))},A=()=>{t.current&&cancelAnimationFrame(t.current),d.current&&clearTimeout(d.current),o.current=null},S=O(n=>{A(),T.current=0;let r=typeof n=="number"?n:c;b.current=r,R(r),s&&(t.current=requestAnimationFrame(l))},[s,c]);return E(()=>{if(f==null||f(i),e&&i>=e){x.current+=e*1e3;let{shouldRepeat:n=!1,delay:r=0,newStartAt:y}=(p==null?void 0:p(x.current/1e3))||{};n&&(d.current=setTimeout(()=>S(y),r*1e3))}},[i,e]),E(()=>(s&&(t.current=requestAnimationFrame(l)),A),[s,e,m]),{elapsedTime:i,reset:S}};export{V as useElapsedTime};