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

Comparing version 3.0.9 to 3.1.0

lib/index.js

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

lib/index.module.js

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

package.json

 {
   "name": "react-countdown-circle-timer",
-  "version": "3.0.9",
+  "version": "3.1.0",
   "description": "Lightweight React countdown timer component with color and progress animation based on SVG",
@@ -11,10 +11,2 @@ "main": "./lib/index.js",
   ],
-  "scripts": {
-    "start": "node scripts/serve.js",
-    "build": "node scripts/build.js",
-    "dev:push": "pnpm run build && yalc push",
-    "test": "jest --collectCoverage",
-    "test:watch": "jest --watch",
-    "prepublish": "pnpm build"
-  },
   "repository": {
@@ -42,4 +34,12 @@ "type": "git",
   "devDependencies": {
-    "@countdown/shared": "workspace:*"
+    "@countdown/shared": "3.0.0"
+  },
+  "scripts": {
+    "start": "node scripts/serve.js",
+    "build": "node scripts/build.js",
+    "dev:push": "pnpm run build && yalc push",
+    "test": "jest --collectCoverage",
+    "test:watch": "jest --watch",
+    "prepublish": "pnpm build"
   }
-}
+}

README.md

@@ -87,3 +87,3 @@ # React Countdown Circle Timer
 
-The component and hook support [all modern browsers](https://caniuse.com/?search=es6) targeting `es6`. Internet Explorer (IE) is not longer supported.
+The component and hook support [all modern browsers](https://caniuse.com/?search=es6) targeting `ES6`. Internet Explorer (IE) is not longer supported.
 
@@ -94,3 +94,3 @@ ## Recipes
 
-Once the component is mounted the `duration` prop can be changed the the timer will respect the new duration. In case the new duration is bigger than the previous one then the timer will continue to the new duration. In case the new duration is smaller then the previous one then the timer will ne over. If you want to restart the timer when the duration changes then pass a new `key` prop to `CountdownCircleTimer` component and the timer will start over with the new values provided.
+Once the component is mounted the `duration` prop can be changed the the timer will respect the new duration. In case the new duration is bigger than the previous one then the timer will continue to the new duration. In case the new duration is smaller then the previous one then the timer will be over. If you want to restart the timer when the duration changes then pass a new `key` prop to `CountdownCircleTimer` component and the timer will start over with the new values provided.
 
@@ -134,3 +134,3 @@ ### Restart timer at any given time
 
-In the example above, the countdown will start at 15 seconds (one quarter before it's done) and it will animate for 15 seconds until reaches 0.
+In the example above, the countdown will start at 15 seconds (one quarter before it's done) and it will animate for 15 seconds until it reaches 0.
 
@@ -137,0 +137,0 @@ ### Time formatting functions

No alert changes

Improved metrics

Total package byte prevSize

25889

increased by3.48%

Number of package files

6

increased by20%

No dependency changes