react-countdown-circle-timer - npm Package Compare versions

Comparing version 3.0.3 to 3.0.4

lib/index.js

@@ -1,1 +0,1 @@
-var U=Object.create;var x=Object.defineProperty;var j=Object.getOwnPropertyDescriptor;var z=Object.getOwnPropertyNames;var N=Object.getPrototypeOf,O=Object.prototype.hasOwnProperty;var F=e=>x(e,"__esModule",{value:!0});var H=(e,t)=>{F(e);for(var o in t)x(e,o,{get:t[o],enumerable:!0})},J=(e,t,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of z(t))!O.call(e,r)&&r!=="default"&&x(e,r,{get:()=>t[r],enumerable:!(o=j(t,r))||o.enumerable});return e},T=e=>J(F(x(e!=null?U(N(e)):{},"default",e&&e.__esModule&&"default"in e?{get:()=>e.default,enumerable:!0}:{value:e,enumerable:!0})),e);H(exports,{CountdownCircleTimer:()=>A,useCountdown:()=>S});var b=T(require("react"));var q=T(require("react"));var f=T(require("react")),$=T(require("react")),W=typeof window=="undefined"?$.useEffect:$.useLayoutEffect,D=({isPlaying:e,duration:t,startAt:o=0,updateInterval:r=0,onComplete:s,onUpdate:n})=>{let[i,c]=(0,f.useState)(o),m=(0,f.useRef)(0),p=(0,f.useRef)(o*-1e3),u=(0,f.useRef)(null),a=(0,f.useRef)(null),l=(0,f.useRef)(null),g=h=>{let y=h/1e3;if(a.current===null){a.current=y,u.current=requestAnimationFrame(g);return}let d=y-a.current,w=m.current+d;a.current=y,m.current=w;let P=o+(r===0?w:(w/r|0)*r),k=o+w,G=typeof t=="number"&&k>=t;c(G?t:P),G||(u.current=requestAnimationFrame(g))},R=()=>{u.current&&cancelAnimationFrame(u.current),l.current&&clearTimeout(l.current),a.current=null},C=(0,f.useCallback)(h=>{R(),m.current=0,c(typeof h=="number"?h:o),e&&(u.current=requestAnimationFrame(g))},[e,o]);return W(()=>{if(n==null||n(i),t&&i>=t){p.current+=t*1e3;let{shouldRepeat:h=!1,delay:y=0,newStartAt:d}=(s==null?void 0:s(p.current/1e3))||{};h&&(l.current=setTimeout(()=>C(d),y*1e3))}},[i,t]),W(()=>(e&&(u.current=requestAnimationFrame(g)),R),[e,t,r]),{elapsedTime:i,reset:C}};var E=(e,t,o)=>{let r=e/2,s=t/2,n=r-s,i=2*n,c=o==="clockwise"?"1,0":"0,1",m=2*Math.PI*n;return{path:`m ${r},${s} a ${n},${n} 0 ${c} 0,${i} a ${n},${n} 0 ${c} 0,-${i}`,pathLength:m}},B=(e,t)=>e===0?0:typeof t=="number"?e-t:0,v=e=>({position:"relative",width:e,height:e}),I={display:"flex",justifyContent:"center",alignItems:"center",position:"absolute",left:0,top:0,width:"100%",height:"100%"};var M=(e,t,o,r)=>{if(r===0)return t;let s=e/r;return t+o*s},L=e=>{var t,o;return(o=(t=e.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(r,s,n,i)=>`#${s}${s}${n}${n}${i}${i}`).substring(1).match(/.{2}/g))==null?void 0:t.map(r=>parseInt(r,16)))!=null?o:[]},K=(e,t)=>{var u;let{colors:o,colorsTime:r,isSmoothColorTransition:s=!0}=e;if(typeof o=="string")return o;let n=(u=r==null?void 0:r.findIndex((a,l)=>a>=t&&t>=r[l+1]))!=null?u:-1;if(!r||n===-1)return o[0];if(!s)return o[n];let i=r[n]-t,c=r[n]-r[n+1],m=L(o[n]),p=L(o[n+1]);return`rgb(${m.map((a,l)=>M(i,a,p[l]-a,c)|0).join(",")})`},S=e=>{let{duration:t,initialRemainingTime:o,updateInterval:r,size:s=180,strokeWidth:n=12,trailStrokeWidth:i,isPlaying:c=!1,rotation:m="clockwise",onComplete:p,onUpdate:u}=e,a=(0,q.useRef)(),l=Math.max(n,i!=null?i:0),{path:g,pathLength:R}=E(s,l,m),{elapsedTime:C}=D({isPlaying:c,duration:t,startAt:B(t,o),updateInterval:r,onUpdate:typeof u=="function"?y=>{let d=Math.ceil(t-y);d!==a.current&&(a.current=d,u(d))}:void 0,onComplete:typeof p=="function"?y=>{var k;let{shouldRepeat:d,delay:w,newInitialRemainingTime:P}=(k=p(y))!=null?k:{};if(d)return{shouldRepeat:d,delay:w,newStartAt:B(t,P)}}:void 0}),h=t-C;return{elapsedTime:C,path:g,pathLength:R,remainingTime:Math.ceil(h),rotation:m,size:s,stroke:K(e,h),strokeDashoffset:M(C,0,R,t),strokeWidth:n}};var A=e=>{let{children:t,strokeLinecap:o,trailColor:r,trailStrokeWidth:s}=e,{path:n,pathLength:i,stroke:c,strokeDashoffset:m,remainingTime:p,elapsedTime:u,size:a,strokeWidth:l}=S(e);return b.default.createElement("div",{style:v(a)},b.default.createElement("svg",{width:a,height:a,xmlns:"http://www.w3.org/2000/svg"},b.default.createElement("path",{d:n,fill:"none",stroke:r!=null?r:"#d9d9d9",strokeWidth:s!=null?s:l}),b.default.createElement("path",{d:n,fill:"none",stroke:c,strokeLinecap:o!=null?o:"round",strokeWidth:l,strokeDasharray:i,strokeDashoffset:m})),typeof t=="function"&&b.default.createElement("div",{style:I},t({remainingTime:p,elapsedTime:u,color:c})))};A.displayName="CountdownCircleTimer";
+var j=Object.create;var $=Object.defineProperty;var z=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var O=Object.getPrototypeOf,V=Object.prototype.hasOwnProperty;var F=e=>$(e,"__esModule",{value:!0});var H=(e,t)=>{F(e);for(var o in t)$(e,o,{get:t[o],enumerable:!0})},J=(e,t,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of N(t))!V.call(e,r)&&r!=="default"&&$(e,r,{get:()=>t[r],enumerable:!(o=z(t,r))||o.enumerable});return e},T=e=>J(F($(e!=null?j(O(e)):{},"default",e&&e.__esModule&&"default"in e?{get:()=>e.default,enumerable:!0}:{value:e,enumerable:!0})),e);H(exports,{CountdownCircleTimer:()=>A,useCountdown:()=>k});var w=T(require("react"));var q=T(require("react"));var d=T(require("react")),P=T(require("react")),W=typeof window=="undefined"?P.useEffect:P.useLayoutEffect,D=({isPlaying:e,duration:t,startAt:o=0,updateInterval:r=0,onComplete:s,onUpdate:n})=>{let[i,m]=(0,d.useState)(o),l=(0,d.useRef)(0),p=(0,d.useRef)(o),f=(0,d.useRef)(o*-1e3),u=(0,d.useRef)(null),c=(0,d.useRef)(null),b=(0,d.useRef)(null),y=h=>{let a=h/1e3;if(c.current===null){c.current=a,u.current=requestAnimationFrame(y);return}let S=a-c.current,C=l.current+S;c.current=a,l.current=C;let x=p.current+(r===0?C:(C/r|0)*r),U=p.current+C,G=typeof t=="number"&&U>=t;m(G?t:x),G||(u.current=requestAnimationFrame(y))},g=()=>{u.current&&cancelAnimationFrame(u.current),b.current&&clearTimeout(b.current),c.current=null},R=(0,d.useCallback)(h=>{g(),l.current=0;let a=typeof h=="number"?h:o;p.current=a,m(a),e&&(u.current=requestAnimationFrame(y))},[e,o]);return W(()=>{if(n==null||n(i),t&&i>=t){f.current+=t*1e3;let{shouldRepeat:h=!1,delay:a=0,newStartAt:S}=(s==null?void 0:s(f.current/1e3))||{};h&&(b.current=setTimeout(()=>R(S),a*1e3))}},[i,t]),W(()=>(e&&(u.current=requestAnimationFrame(y)),g),[e,t,r]),{elapsedTime:i,reset:R}};var E=(e,t,o)=>{let r=e/2,s=t/2,n=r-s,i=2*n,m=o==="clockwise"?"1,0":"0,1",l=2*Math.PI*n;return{path:`m ${r},${s} a ${n},${n} 0 ${m} 0,${i} a ${n},${n} 0 ${m} 0,-${i}`,pathLength:l}},B=(e,t)=>e===0||e===t?0:typeof t=="number"?e-t:0,v=e=>({position:"relative",width:e,height:e}),I={display:"flex",justifyContent:"center",alignItems:"center",position:"absolute",left:0,top:0,width:"100%",height:"100%"};var M=(e,t,o,r)=>{if(r===0)return t;let s=e/r;return t+o*s},L=e=>{var t,o;return(o=(t=e.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(r,s,n,i)=>`#${s}${s}${n}${n}${i}${i}`).substring(1).match(/.{2}/g))==null?void 0:t.map(r=>parseInt(r,16)))!=null?o:[]},K=(e,t)=>{var f;let{colors:o,colorsTime:r,isSmoothColorTransition:s=!0}=e;if(typeof o=="string")return o;let n=(f=r==null?void 0:r.findIndex((u,c)=>u>=t&&t>=r[c+1]))!=null?f:-1;if(!r||n===-1)return o[0];if(!s)return o[n];let i=r[n]-t,m=r[n]-r[n+1],l=L(o[n]),p=L(o[n+1]);return`rgb(${l.map((u,c)=>M(i,u,p[c]-u,m)|0).join(",")})`},k=e=>{let{duration:t,initialRemainingTime:o,updateInterval:r,size:s=180,strokeWidth:n=12,trailStrokeWidth:i,isPlaying:m=!1,rotation:l="clockwise",onComplete:p,onUpdate:f}=e,u=(0,q.useRef)(),c=Math.max(n,i!=null?i:0),{path:b,pathLength:y}=E(s,c,l),{elapsedTime:g}=D({isPlaying:m,duration:t,startAt:B(t,o),updateInterval:r,onUpdate:typeof f=="function"?h=>{let a=Math.ceil(t-h);a!==u.current&&(u.current=a,f(a))}:void 0,onComplete:typeof p=="function"?h=>{var x;let{shouldRepeat:a,delay:S,newInitialRemainingTime:C}=(x=p(h))!=null?x:{};if(a)return{shouldRepeat:a,delay:S,newStartAt:B(t,C)}}:void 0}),R=t-g;return{elapsedTime:g,path:b,pathLength:y,remainingTime:Math.ceil(R),rotation:l,size:s,stroke:K(e,R),strokeDashoffset:M(g,0,y,t),strokeWidth:n}};var A=e=>{let{children:t,strokeLinecap:o,trailColor:r,trailStrokeWidth:s}=e,{path:n,pathLength:i,stroke:m,strokeDashoffset:l,remainingTime:p,elapsedTime:f,size:u,strokeWidth:c}=k(e);return w.default.createElement("div",{style:v(u)},w.default.createElement("svg",{width:u,height:u,xmlns:"http://www.w3.org/2000/svg"},w.default.createElement("path",{d:n,fill:"none",stroke:r!=null?r:"#d9d9d9",strokeWidth:s!=null?s:c}),w.default.createElement("path",{d:n,fill:"none",stroke:m,strokeLinecap:o!=null?o:"round",strokeWidth:c,strokeDasharray:i,strokeDashoffset:l})),typeof t=="function"&&w.default.createElement("div",{style:I},t({remainingTime:p,elapsedTime:f,color:m})))};A.displayName="CountdownCircleTimer";

lib/index.module.js

@@ -1,1 +0,1 @@
-import R from"react";import{useRef as L}from"react";import{useState as D,useRef as b,useCallback as E}from"react";import{useEffect as q,useLayoutEffect as M}from"react";var v=typeof window=="undefined"?q:M,I=({isPlaying:n,duration:t,startAt:r=0,updateInterval:e=0,onComplete:s,onUpdate:o})=>{let[i,c]=D(r),m=b(0),p=b(r*-1e3),u=b(null),a=b(null),l=b(null),y=f=>{let h=f/1e3;if(a.current===null){a.current=h,u.current=requestAnimationFrame(y);return}let d=h-a.current,C=m.current+d;a.current=h,m.current=C;let x=r+(e===0?C:(C/e|0)*e),S=r+C,B=typeof t=="number"&&S>=t;c(B?t:x),B||(u.current=requestAnimationFrame(y))},w=()=>{u.current&&cancelAnimationFrame(u.current),l.current&&clearTimeout(l.current),a.current=null},g=E(f=>{w(),m.current=0,c(typeof f=="number"?f:r),n&&(u.current=requestAnimationFrame(y))},[n,r]);return v(()=>{if(o==null||o(i),t&&i>=t){p.current+=t*1e3;let{shouldRepeat:f=!1,delay:h=0,newStartAt:d}=(s==null?void 0:s(p.current/1e3))||{};f&&(l.current=setTimeout(()=>g(d),h*1e3))}},[i,t]),v(()=>(n&&(u.current=requestAnimationFrame(y)),w),[n,t,e]),{elapsedTime:i,reset:g}};var A=(n,t,r)=>{let e=n/2,s=t/2,o=e-s,i=2*o,c=r==="clockwise"?"1,0":"0,1",m=2*Math.PI*o;return{path:`m ${e},${s} a ${o},${o} 0 ${c} 0,${i} a ${o},${o} 0 ${c} 0,-${i}`,pathLength:m}},T=(n,t)=>n===0?0:typeof t=="number"?n-t:0,$=n=>({position:"relative",width:n,height:n}),P={display:"flex",justifyContent:"center",alignItems:"center",position:"absolute",left:0,top:0,width:"100%",height:"100%"};var G=(n,t,r,e)=>{if(e===0)return t;let s=n/e;return t+r*s},F=n=>{var t,r;return(r=(t=n.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(e,s,o,i)=>`#${s}${s}${o}${o}${i}${i}`).substring(1).match(/.{2}/g))==null?void 0:t.map(e=>parseInt(e,16)))!=null?r:[]},U=(n,t)=>{var u;let{colors:r,colorsTime:e,isSmoothColorTransition:s=!0}=n;if(typeof r=="string")return r;let o=(u=e==null?void 0:e.findIndex((a,l)=>a>=t&&t>=e[l+1]))!=null?u:-1;if(!e||o===-1)return r[0];if(!s)return r[o];let i=e[o]-t,c=e[o]-e[o+1],m=F(r[o]),p=F(r[o+1]);return`rgb(${m.map((a,l)=>G(i,a,p[l]-a,c)|0).join(",")})`},k=n=>{let{duration:t,initialRemainingTime:r,updateInterval:e,size:s=180,strokeWidth:o=12,trailStrokeWidth:i,isPlaying:c=!1,rotation:m="clockwise",onComplete:p,onUpdate:u}=n,a=L(),l=Math.max(o,i!=null?i:0),{path:y,pathLength:w}=A(s,l,m),{elapsedTime:g}=I({isPlaying:c,duration:t,startAt:T(t,r),updateInterval:e,onUpdate:typeof u=="function"?h=>{let d=Math.ceil(t-h);d!==a.current&&(a.current=d,u(d))}:void 0,onComplete:typeof p=="function"?h=>{var S;let{shouldRepeat:d,delay:C,newInitialRemainingTime:x}=(S=p(h))!=null?S:{};if(d)return{shouldRepeat:d,delay:C,newStartAt:T(t,x)}}:void 0}),f=t-g;return{elapsedTime:g,path:y,pathLength:w,remainingTime:Math.ceil(f),rotation:m,size:s,stroke:U(n,f),strokeDashoffset:G(g,0,w,t),strokeWidth:o}};var W=n=>{let{children:t,strokeLinecap:r,trailColor:e,trailStrokeWidth:s}=n,{path:o,pathLength:i,stroke:c,strokeDashoffset:m,remainingTime:p,elapsedTime:u,size:a,strokeWidth:l}=k(n);return R.createElement("div",{style:$(a)},R.createElement("svg",{width:a,height:a,xmlns:"http://www.w3.org/2000/svg"},R.createElement("path",{d:o,fill:"none",stroke:e!=null?e:"#d9d9d9",strokeWidth:s!=null?s:l}),R.createElement("path",{d:o,fill:"none",stroke:c,strokeLinecap:r!=null?r:"round",strokeWidth:l,strokeDasharray:i,strokeDashoffset:m})),typeof t=="function"&&R.createElement("div",{style:P},t({remainingTime:p,elapsedTime:u,color:c})))};W.displayName="CountdownCircleTimer";export{W as CountdownCircleTimer,k as useCountdown};
+import S from"react";import{useRef as U}from"react";import{useState as E,useRef as C,useCallback as q}from"react";import{useEffect as M,useLayoutEffect as L}from"react";var v=typeof window=="undefined"?M:L,I=({isPlaying:o,duration:t,startAt:n=0,updateInterval:e=0,onComplete:s,onUpdate:r})=>{let[i,m]=E(n),l=C(0),p=C(n),d=C(n*-1e3),u=C(null),c=C(null),w=C(null),h=f=>{let a=f/1e3;if(c.current===null){c.current=a,u.current=requestAnimationFrame(h);return}let R=a-c.current,g=l.current+R;c.current=a,l.current=g;let k=p.current+(e===0?g:(g/e|0)*e),D=p.current+g,B=typeof t=="number"&&D>=t;m(B?t:k),B||(u.current=requestAnimationFrame(h))},y=()=>{u.current&&cancelAnimationFrame(u.current),w.current&&clearTimeout(w.current),c.current=null},b=q(f=>{y(),l.current=0;let a=typeof f=="number"?f:n;p.current=a,m(a),o&&(u.current=requestAnimationFrame(h))},[o,n]);return v(()=>{if(r==null||r(i),t&&i>=t){d.current+=t*1e3;let{shouldRepeat:f=!1,delay:a=0,newStartAt:R}=(s==null?void 0:s(d.current/1e3))||{};f&&(w.current=setTimeout(()=>b(R),a*1e3))}},[i,t]),v(()=>(o&&(u.current=requestAnimationFrame(h)),y),[o,t,e]),{elapsedTime:i,reset:b}};var A=(o,t,n)=>{let e=o/2,s=t/2,r=e-s,i=2*r,m=n==="clockwise"?"1,0":"0,1",l=2*Math.PI*r;return{path:`m ${e},${s} a ${r},${r} 0 ${m} 0,${i} a ${r},${r} 0 ${m} 0,-${i}`,pathLength:l}},$=(o,t)=>o===0||o===t?0:typeof t=="number"?o-t:0,T=o=>({position:"relative",width:o,height:o}),P={display:"flex",justifyContent:"center",alignItems:"center",position:"absolute",left:0,top:0,width:"100%",height:"100%"};var G=(o,t,n,e)=>{if(e===0)return t;let s=o/e;return t+n*s},F=o=>{var t,n;return(n=(t=o.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(e,s,r,i)=>`#${s}${s}${r}${r}${i}${i}`).substring(1).match(/.{2}/g))==null?void 0:t.map(e=>parseInt(e,16)))!=null?n:[]},j=(o,t)=>{var d;let{colors:n,colorsTime:e,isSmoothColorTransition:s=!0}=o;if(typeof n=="string")return n;let r=(d=e==null?void 0:e.findIndex((u,c)=>u>=t&&t>=e[c+1]))!=null?d:-1;if(!e||r===-1)return n[0];if(!s)return n[r];let i=e[r]-t,m=e[r]-e[r+1],l=F(n[r]),p=F(n[r+1]);return`rgb(${l.map((u,c)=>G(i,u,p[c]-u,m)|0).join(",")})`},x=o=>{let{duration:t,initialRemainingTime:n,updateInterval:e,size:s=180,strokeWidth:r=12,trailStrokeWidth:i,isPlaying:m=!1,rotation:l="clockwise",onComplete:p,onUpdate:d}=o,u=U(),c=Math.max(r,i!=null?i:0),{path:w,pathLength:h}=A(s,c,l),{elapsedTime:y}=I({isPlaying:m,duration:t,startAt:$(t,n),updateInterval:e,onUpdate:typeof d=="function"?f=>{let a=Math.ceil(t-f);a!==u.current&&(u.current=a,d(a))}:void 0,onComplete:typeof p=="function"?f=>{var k;let{shouldRepeat:a,delay:R,newInitialRemainingTime:g}=(k=p(f))!=null?k:{};if(a)return{shouldRepeat:a,delay:R,newStartAt:$(t,g)}}:void 0}),b=t-y;return{elapsedTime:y,path:w,pathLength:h,remainingTime:Math.ceil(b),rotation:l,size:s,stroke:j(o,b),strokeDashoffset:G(y,0,h,t),strokeWidth:r}};var W=o=>{let{children:t,strokeLinecap:n,trailColor:e,trailStrokeWidth:s}=o,{path:r,pathLength:i,stroke:m,strokeDashoffset:l,remainingTime:p,elapsedTime:d,size:u,strokeWidth:c}=x(o);return S.createElement("div",{style:T(u)},S.createElement("svg",{width:u,height:u,xmlns:"http://www.w3.org/2000/svg"},S.createElement("path",{d:r,fill:"none",stroke:e!=null?e:"#d9d9d9",strokeWidth:s!=null?s:c}),S.createElement("path",{d:r,fill:"none",stroke:m,strokeLinecap:n!=null?n:"round",strokeWidth:c,strokeDasharray:i,strokeDashoffset:l})),typeof t=="function"&&S.createElement("div",{style:P},t({remainingTime:p,elapsedTime:d,color:m})))};W.displayName="CountdownCircleTimer";export{W as CountdownCircleTimer,x as useCountdown};

package.json

 {
   "name": "react-countdown-circle-timer",
-  "version": "3.0.3",
+  "version": "3.0.4",
   "description": "Lightweight React countdown timer component with color and progress animation based on SVG",
@@ -5,0 +5,0 @@ "main": "./lib/index.js",

README.md

@@ -64,20 +64,20 @@ # React Countdown Circle Timer
 
-| Prop Name               | Type                                                                                | Default     | Description                                                                                                                                                                                   |
-| ----------------------- | ----------------------------------------------------------------------------------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| duration                | number                                                                              | _required_  | Countdown duration in seconds                                                                                                                                                                 |
-| colors                  | string \| string[]                                                                  | _required_  | `colors` prop is either:<br> - Single valid color in any format or URL to a gradient<br> - Array of colors in HEX format. At least 2 colors should be provided                                |
-| colorsTime              | number[]                                                                            | -           | Indicates the time when a color should switch to the next color. The first number is the countdown duration and the last one is 0 or goal. Works only when `colors` is an array of HEX colors |
-| isPlaying               | boolean                                                                             | false       | Play or pause animation                                                                                                                                                                       |
-| initialRemainingTime    | number                                                                              | -           | Set the initial remaining time if it is different than the duration                                                                                                                           |
-| updateInterval          | number                                                                              | 0           | Update interval in seconds. Determines how often the timer updates. When set to 0 the value will update on each key frame                                                                     |
-| size                    | number                                                                              | 180         | Width and height of the SVG element                                                                                                                                                           |
-| strokeWidth             | number                                                                              | 12          | Path stroke width                                                                                                                                                                             |
-| trailStrokeWidth        | number                                                                              | strokeWidth | Trail stroke width                                                                                                                                                                            |
-| strokeLinecap           | round \| square                                                                     | round       | Path stroke line cap                                                                                                                                                                          |
-| rotation                | clockwise \| counterclockwise                                                       | clockwise   | Progress path rotation direction                                                                                                                                                              |
-| trailColor              | string                                                                              | #d9d9d9     | Circle trail color - takes any valid color format                                                                                                                                             |
-| isSmoothColorTransition | boolean                                                                             | true        | Indicates if the colors should smoothly transition to the next color                                                                                                                          |
-| children                | (props: { remainingTime: number, elapsedTime: number, color: string }) => ReactNode | -           | Render function to customize the time/content in the center of the circle                                                                                                                     |
-| onComplete              | (totalElapsedTime: number) => void \| { shouldRepeat: boolean, delay: number }      | -           | On animation complete event handler                                                                                                                                                           |
-| onUpdate                | (remainingTime: number) => void                                                     | -           | On remaining time update event handler                                                                                                                                                        |
+| Prop Name               | Type                                                                                                              | Default     | Description                                                                                                                                                                                   |
+| ----------------------- | ----------------------------------------------------------------------------------------------------------------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| duration                | number                                                                                                            | _required_  | Countdown duration in seconds                                                                                                                                                                 |
+| colors                  | string \| string[]                                                                                                | _required_  | `colors` prop is either:<br> - Single valid color in any format or URL to a gradient<br> - Array of colors in HEX format. At least 2 colors should be provided                                |
+| colorsTime              | number[]                                                                                                          | -           | Indicates the time when a color should switch to the next color. The first number is the countdown duration and the last one is 0 or goal. Works only when `colors` is an array of HEX colors |
+| isPlaying               | boolean                                                                                                           | false       | Play or pause animation                                                                                                                                                                       |
+| initialRemainingTime    | number                                                                                                            | -           | Set the initial remaining time if it is different than the duration                                                                                                                           |
+| updateInterval          | number                                                                                                            | 0           | Update interval in seconds. Determines how often the timer updates. When set to 0 the value will update on each key frame                                                                     |
+| size                    | number                                                                                                            | 180         | Width and height of the SVG element                                                                                                                                                           |
+| strokeWidth             | number                                                                                                            | 12          | Path stroke width                                                                                                                                                                             |
+| trailStrokeWidth        | number                                                                                                            | strokeWidth | Trail stroke width                                                                                                                                                                            |
+| strokeLinecap           | round \| square                                                                                                   | round       | Path stroke line cap                                                                                                                                                                          |
+| rotation                | clockwise \| counterclockwise                                                                                     | clockwise   | Progress path rotation direction                                                                                                                                                              |
+| trailColor              | string                                                                                                            | #d9d9d9     | Circle trail color - takes any valid color format                                                                                                                                             |
+| isSmoothColorTransition | boolean                                                                                                           | true        | Indicates if the colors should smoothly transition to the next color                                                                                                                          |
+| children                | (props: { remainingTime: number, elapsedTime: number, color: string }) => ReactNode                               | -           | Render function to customize the time/content in the center of the circle                                                                                                                     |
+| onComplete              | (totalElapsedTime: number) => void \| { shouldRepeat: boolean, delay?: number, newInitialRemainingTime?: number } | -           | On animation complete event handler                                                                                                                                                           |
+| onUpdate                | (remainingTime: number) => void                                                                                   | -           | On remaining time update event handler                                                                                                                                                        |
 
@@ -84,0 +84,0 @@ ## Browser support

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

25418

increased by2.63%

No dependency changes