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

Comparing version 1.0.2 to 1.0.3

babel.config.js

@@ -0,0 +0,0 @@ module.exports = (api) => {

lib/index.js

@@ -1,1 +0,1 @@
-module.exports=function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}return r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=4)}([function(e,t){e.exports=require("react")},function(e,t,r){e.exports=r(2)()},function(e,t,r){"use strict";var n=r(3);function o(){}function i(){}i.resetWarningCache=o,e.exports=function(){function e(e,t,r,o,i,a){if(a!==n){var c=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw c.name="Invariant Violation",c}}function t(){return e}e.isRequired=e;var r={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,elementType:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:i,resetWarningCache:o};return r.PropTypes=r,r}},function(e,t,r){"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},function(e,t,r){"use strict";r.r(t);var n=r(0),o=r.n(n),i=r(1),a=r.n(i);function c(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){if(!(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e)))return;var r=[],n=!0,o=!1,i=void 0;try{for(var a,c=e[Symbol.iterator]();!(n=(a=c.next()).done)&&(r.push(a.value),!t||r.length!==t);n=!0);}catch(e){o=!0,i=e}finally{try{n||null==c.return||c.return()}finally{if(o)throw i}}return r}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}var u=function(e,t,r,n){return t+r*(e/n)},l=function(e){return{position:"relative",width:e,height:e,margin:"0 auto"}},f=function(e,t){return{display:"flex",WebkitBoxPack:"center",MsFlexPack:"center",justifyContent:"center",WebkitBoxAlign:"center",MsFlexAlign:"center",alignItems:"center",position:"relative",width:t,height:t,color:e}},s={position:"absolute",left:0,top:0,width:"100%",height:"100%"};function p(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function d(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?p(r,!0).forEach((function(t){y(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):p(r).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function y(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}var b=function(e){var t=e.r,r=e.g,n=e.b,o=e.opacity;return"rgba(".concat(t,", ").concat(r,", ").concat(n,", ").concat(o,")")},m=function(e,t,r){var n=function(e){return e.map((function(e){var t=e[0].replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(function(e,t,r,n){return"#".concat(t).concat(t).concat(r).concat(r).concat(n).concat(n)})).substring(1).match(/.{2}/g).map((function(e){return parseInt(e,16)}));return[{r:t[0],g:t[1],b:t[2],opacity:1},e[1]]}))}(e);if(!r)return n;var o=0;return n.map((function(e,t){var r=n.length===t+1,i="0%";if(t>0){var a=n[t-1][1],c=Math.round(a?100*a:100);(o+=c)>100||r?(o=100,i="100%"):i="".concat(o,"%")}var u={offset:i,stopColor:b(e[0]),key:t};return[d({},e[0],{gradient:u}),e[1]]}))};function v(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){if(!(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e)))return;var r=[],n=!0,o=!1,i=void 0;try{for(var a,c=e[Symbol.iterator]();!(n=(a=c.next()).done)&&(r.push(a.value),!t||r.length!==t);n=!0);}catch(e){o=!0,i=e}finally{try{n||null==c.return||c.return()}finally{if(o)throw i}}return r}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}r.d(t,"CountdownCircleTimer",(function(){return h}));var g=function(e,t){return e?"countdown-circle-timer-gradient-".concat(t||Math.random().toString(36).substring(2)):""},h=function(e){var t=e.size,r=e.strokeWidth,i=e.trailColor,a=e.durationSeconds,p=e.isPlaying,y=e.colors,h=e.strokeLinecap,O=e.renderTime,j=e.isLinearGradient,w=e.gradientUniqueKey,E=e.onComplete,P=Object(n.useRef)(null),x=v(Object(n.useState)(0),2),S=x[0],T=x[1],k=Object(n.useMemo)((function(){return function(e,t){var r=e/2,n=t/2,o=r-n,i=2*o;return"m ".concat(r,",").concat(n,"\n          a ").concat(o,",").concat(o," 0 1,0 0,").concat(i,"\n          a ").concat(o,",").concat(o," 0 1,0 0,-").concat(i)}(t,r)}),[t,r]),_=Object(n.useMemo)((function(){return 1e3*a}),[a]),A=Object(n.useMemo)((function(){return function(e,t,r){var n=m(e,0,r),o=0;return n.map((function(e,r){var i=n.length===r+1;if(o>=t||i)return o=t,d({},e[0],{colorEndTime:o});var a=o,c=void 0!==e[1]?a+e[1]*t:t-o,u=c>=t?t:c,l=n[r+1][0],f={goalR:l.r-e[0].r,goalG:l.g-e[0].g,goalB:l.b-e[0].b};return o=u,d({},e[0],{},f,{colorStartTime:a,colorEndTime:u,duration:u-a})}))}(y,_,j)}),[y,_,j]),C=Object(n.useMemo)((function(){return g(j,w)}),[j,w]);Object(n.useEffect)((function(){var e=P.current.getTotalLength().toFixed(2);T(e)}),[]);var M=function(e,t,r){var o=c(Object(n.useState)(0),2),i=o[0],a=o[1],u=Object(n.useRef)(),l=Object(n.useRef)(),f=function t(n){var o=!1;if(void 0!==l.current){var i=n-l.current;a((function(t){var r=t+i;return(o=r>=e)?e:r}))}o?"function"==typeof r&&r():(l.current=n,u.current=requestAnimationFrame(t))};return Object(n.useLayoutEffect)((function(){return t&&i!==e&&(u.current=requestAnimationFrame(f)),function(){cancelAnimationFrame(u.current),l.current=void 0,u.current=void 0}}),[t]),i}(_,p,E),R=u(M,0,S,_).toFixed(2),L=function(e,t){if(1===e.length)return b(e[0]);var r=e.find((function(e){var r=e.colorEndTime;return t<=r}));if(void 0===r.duration)return b(r);var n=t-r.colorStartTime,o=0|u(n,r.r,r.goalR,r.duration),i=0|u(n,r.g,r.goalG,r.duration),a=0|u(n,r.b,r.goalB,r.duration);return b({r:o,g:i,b:a,opacity:r.opacity})}(A,M),q=Math.ceil((_-M)/1e3);return o.a.createElement("div",{style:l(t)},o.a.createElement("svg",{width:t,height:t,style:s,xmlns:"http://www.w3.org/2000/svg"},j&&o.a.createElement("defs",null,o.a.createElement("linearGradient",{id:C,x1:"100%",y1:"0%",x2:"0%",y2:"0%"},A.map((function(e){return o.a.createElement("stop",e.gradient)})))),o.a.createElement("path",{fill:"none",strokeWidth:r,stroke:i,d:k}),o.a.createElement("path",{fill:"none",stroke:j?"url(#".concat(C,")"):L,d:k,ref:P,strokeLinecap:h,strokeWidth:r,strokeDasharray:S,strokeDashoffset:R})),o.a.createElement("div",{style:f(L,t)},"function"==typeof O&&O(q,M,p)))};h.propTypes={durationSeconds:a.a.number.isRequired,colors:a.a.arrayOf(a.a.arrayOf((function(e,t,r,n,o){var i=e[0],a=e[1];return i.match(/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/)?void 0===a||a>=0&&a<=1?void 0:new Error("Invalid prop '".concat(o,"[1]' supplied to '").concat(r,"'. Expect a number of color transition duration with value between 0 and 1.")):new Error("Invalid prop '".concat(o,"[0]' supplied to '").concat(r,"'.Expect a color with HEX color code."))})).isRequired).isRequired,size:a.a.number,strokeWidth:a.a.number,trailColor:a.a.string,isPlaying:a.a.bool,strokeLinecap:a.a.oneOf(["round","square"]),renderTime:a.a.func,isLinearGradient:a.a.bool,gradientUniqueKey:a.a.string,onComplete:a.a.func},h.defaultProps={size:180,strokeWidth:12,trailColor:"#d9d9d9",isPlaying:!1,strokeLinecap:"round",isLinearGradient:!1}}]);
+module.exports=function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}return r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=5)}([function(e,t){e.exports=require("react")},function(e,t,r){e.exports=r(3)()},function(e,t,r){e.exports=function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}return r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=1)}([function(e,t){e.exports=r(0)},function(e,t,r){"use strict";r.r(t),r.d(t,"useElapsedTime",(function(){return i}));var n=r(0);function o(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){if(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e)){var r=[],n=!0,o=!1,i=void 0;try{for(var a,c=e[Symbol.iterator]();!(n=(a=c.next()).done)&&(r.push(a.value),!t||r.length!==t);n=!0);}catch(e){o=!0,i=e}finally{try{n||null==c.return||c.return()}finally{if(o)throw i}}return r}}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}var i=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},r=t.durationMilliseconds,i=t.onComplete,a=Object(n.useState)(0),c=o(a,2),u=c[0],l=c[1],f=Object(n.useRef)(),s=Object(n.useRef)(),d=function e(t){var n=!1;if(void 0!==s.current){var a=t-s.current;l((function(e){var t=e+a;return(n=t>=r)?r:t}))}if(n){if("function"==typeof i){var c=o(i()||[],2),u=c[0],d=void 0!==u&&u,p=c[1];d&&setTimeout((function(){l(0),s.current=void 0,f.current=requestAnimationFrame(e)}),void 0===p?0:p)}}else s.current=t,f.current=requestAnimationFrame(e)};return Object(n.useLayoutEffect)((function(){return e&&(f.current=requestAnimationFrame(d)),function(){cancelAnimationFrame(f.current),s.current=void 0,f.current=void 0}}),[e]),u}}])},function(e,t,r){"use strict";var n=r(4);function o(){}function i(){}i.resetWarningCache=o,e.exports=function(){function e(e,t,r,o,i,a){if(a!==n){var c=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw c.name="Invariant Violation",c}}function t(){return e}e.isRequired=e;var r={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,elementType:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:i,resetWarningCache:o};return r.PropTypes=r,r}},function(e,t,r){"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},function(e,t,r){"use strict";r.r(t);var n=r(0),o=r.n(n),i=r(1),a=r.n(i),c=r(2),u=function(e,t,r,n){return t+r*(e/n)},l=function(e){return{position:"relative",width:e,height:e,margin:"0 auto"}},f=function(e,t){return{display:"flex",WebkitBoxPack:"center",MsFlexPack:"center",justifyContent:"center",WebkitBoxAlign:"center",MsFlexAlign:"center",alignItems:"center",position:"relative",width:t,height:t,color:e}},s={position:"absolute",left:0,top:0,width:"100%",height:"100%"};function d(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function p(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?d(r,!0).forEach((function(t){y(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):d(r).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function y(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}var b=function(e){var t=e.r,r=e.g,n=e.b,o=e.opacity;return"rgba(".concat(t,", ").concat(r,", ").concat(n,", ").concat(o,")")},m=function(e,t,r){var n=function(e){return e.map((function(e){var t=e[0].replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(function(e,t,r,n){return"#".concat(t).concat(t).concat(r).concat(r).concat(n).concat(n)})).substring(1).match(/.{2}/g).map((function(e){return parseInt(e,16)}));return[{r:t[0],g:t[1],b:t[2],opacity:1},e[1]]}))}(e);if(!r)return n;var o=0;return n.map((function(e,t){var r=n.length===t+1,i="0%";if(t>0){var a=n[t-1][1],c=Math.round(a?100*a:100);(o+=c)>100||r?(o=100,i="100%"):i="".concat(o,"%")}var u={offset:i,stopColor:b(e[0]),key:t};return[p({},e[0],{gradient:u}),e[1]]}))};function v(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){if(!(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e)))return;var r=[],n=!0,o=!1,i=void 0;try{for(var a,c=e[Symbol.iterator]();!(n=(a=c.next()).done)&&(r.push(a.value),!t||r.length!==t);n=!0);}catch(e){o=!0,i=e}finally{try{n||null==c.return||c.return()}finally{if(o)throw i}}return r}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}r.d(t,"CountdownCircleTimer",(function(){return h}));var g=function(e,t){return e?"countdown-circle-timer-gradient-".concat(t||Math.random().toString(36).substring(2)):""},h=function(e){var t=e.size,r=e.strokeWidth,i=e.trailColor,a=e.durationSeconds,d=e.isPlaying,y=e.colors,h=e.strokeLinecap,O=e.renderTime,j=e.isLinearGradient,w=e.gradientUniqueKey,x=e.onComplete,P=Object(n.useRef)(null),T=v(Object(n.useState)(0),2),E=T[0],S=T[1],k=Object(n.useMemo)((function(){return function(e,t){var r=e/2,n=t/2,o=r-n,i=2*o;return"m ".concat(r,",").concat(n,"\n          a ").concat(o,",").concat(o," 0 1,0 0,").concat(i,"\n          a ").concat(o,",").concat(o," 0 1,0 0,-").concat(i)}(t,r)}),[t,r]),_=Object(n.useMemo)((function(){return 1e3*a}),[a]),M=Object(n.useMemo)((function(){return function(e,t,r){var n=m(e,0,r),o=0;return n.map((function(e,r){var i=n.length===r+1;if(o>=t||i)return o=t,p({},e[0],{colorEndTime:o});var a=o,c=void 0!==e[1]?a+e[1]*t:t-o,u=c>=t?t:c,l=n[r+1][0],f={goalR:l.r-e[0].r,goalG:l.g-e[0].g,goalB:l.b-e[0].b};return o=u,p({},e[0],{},f,{colorStartTime:a,colorEndTime:u,duration:u-a})}))}(y,_,j)}),[y,_,j]),C=Object(n.useMemo)((function(){return g(j,w)}),[j,w]);Object(n.useEffect)((function(){var e=P.current.getTotalLength().toFixed(2);S(e)}),[]);var A=Object(c.useElapsedTime)(d,{durationMilliseconds:_,onComplete:x}),R=u(A,0,E,_).toFixed(2),q=function(e,t){if(1===e.length)return b(e[0]);var r=e.find((function(e){var r=e.colorEndTime;return t<=r}));if(void 0===r.duration)return b(r);var n=t-r.colorStartTime,o=0|u(n,r.r,r.goalR,r.duration),i=0|u(n,r.g,r.goalG,r.duration),a=0|u(n,r.b,r.goalB,r.duration);return b({r:o,g:i,b:a,opacity:r.opacity})}(M,A),F=Math.ceil((_-A)/1e3);return o.a.createElement("div",{style:l(t)},o.a.createElement("svg",{width:t,height:t,style:s,xmlns:"http://www.w3.org/2000/svg"},j&&o.a.createElement("defs",null,o.a.createElement("linearGradient",{id:C,x1:"100%",y1:"0%",x2:"0%",y2:"0%"},M.map((function(e){return o.a.createElement("stop",e.gradient)})))),o.a.createElement("path",{fill:"none",strokeWidth:r,stroke:i,d:k}),o.a.createElement("path",{fill:"none",stroke:j?"url(#".concat(C,")"):q,d:k,ref:P,strokeLinecap:h,strokeWidth:r,strokeDasharray:E,strokeDashoffset:R})),o.a.createElement("div",{style:f(q,t)},"function"==typeof O&&O(F,A,d)))};h.propTypes={durationSeconds:a.a.number.isRequired,colors:a.a.arrayOf(a.a.arrayOf((function(e,t,r,n,o){var i=e[0],a=e[1];return i.match(/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/)?void 0===a||a>=0&&a<=1?void 0:new Error("Invalid prop '".concat(o,"[1]' supplied to '").concat(r,"'. Expect a number of color transition duration with value between 0 and 1.")):new Error("Invalid prop '".concat(o,"[0]' supplied to '").concat(r,"'.Expect a color with HEX color code."))})).isRequired).isRequired,size:a.a.number,strokeWidth:a.a.number,trailColor:a.a.string,isPlaying:a.a.bool,strokeLinecap:a.a.oneOf(["round","square"]),renderTime:a.a.func,isLinearGradient:a.a.bool,gradientUniqueKey:a.a.string,onComplete:a.a.func},h.defaultProps={size:180,strokeWidth:12,trailColor:"#d9d9d9",isPlaying:!1,strokeLinecap:"round",isLinearGradient:!1},h.displayName="CountdownCircleTimer"}]);

package.json

 {
   "name": "react-countdown-circle-timer",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Lightweight React countdown timer component with color and progress animation based on SVG",
@@ -42,3 +42,6 @@ "main": "./lib/index.js",
     "webpack-cli": "^3.3.8"
+  },
+  "dependencies": {
+    "use-elapsed-time": "^1.1.1"
   }
 }

README.md

@@ -6,4 +6,3 @@ # React Countdown Circle Timer
 
-* Lightweight only 8KB
-* Build with 0 dependencies
+* Lightweight only 8kB
 * Performance optimized with single `requestAnimationFrame` loop to animate color and progress (no `setInterval` used)
@@ -23,4 +22,8 @@ * Transition between colors during the countdown
 
+## Demo
+Check the demo on CodeSandbox to get started  
+[![Edit stoic-cache-e7cie](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/stoic-cache-e7cie?fontsize=14&hidenavigation=1&theme=dark)
+
 ## Basic usage
-```
+```jsx
 import { CountdownCircleTimer } from 'react-countdown-circle-timer';
@@ -30,2 +33,3 @@
     <CountdownCircleTimer
+        isPlaying
         durationSeconds={10}
@@ -37,3 +41,2 @@ colors={[
         ]}
-        isPlaying
     />
@@ -58,6 +61,27 @@ );
 | renderTime         | function(remainingTime: number, elapsedTime: number, isPlaying: boolean): ReactNode | -          | Render prop function to customize the content in the center of the circle. The content is centered using flexbox.                              |
-| onComplete         | function()                                                                          | -          | On complete handler                                                                                                                            |
+| onComplete         | function(): undefined \| Array<[shouldRepeat: boolean, delay: number]>                                                                          | -          | On complete handler. It can be used to repeat the countdown by returning an array where the first element `shouldRepeat` indicates if the loop should start over and second element `delay` specifies the delay before looping again in milliseconds.                                                                                                                            |
 
+## Recipes
+### Restart timer at any given time
+Pass a `key` prop to `CountdownCircleTimer` and change the `key` when the timer should be restarted.
+
+### Repeat timer when countdown is completed
+Return an array from `onComplete` handler, which indicates if the animation should be repeated. Example:  
+```jsx
+const UrgeWithPleasureComponent = () => (
+    <CountdownCircleTimer
+        onComplete={() => {
+            // do your stuff here
+            return [true, 1500]; // repeate animation in 1.5 seconds
+        }}
+        isPlaying
+        durationSeconds={10}
+        colors={[['#A30000']]}
+    />
+);
+
+```
+
 ## Roadmap
 * Test coverage
 * `a11y` support 

src/index.jsx

 import React, { useEffect, useState, useRef, useMemo } from 'react';
 import PropTypes from 'prop-types';
-import { useLoop } from './hooks';
+import { useElapsedTime } from 'use-elapsed-time';
 import {
@@ -47,3 +47,3 @@ uuid,
 
-  const elapsedTime = useLoop(durationMilliseconds, isPlaying, onComplete);
+  const elapsedTime = useElapsedTime(isPlaying, { durationMilliseconds, onComplete });
   const strokeDasharray = linearEase(elapsedTime, 0, pathTotalLength, durationMilliseconds).toFixed(2);
@@ -112,4 +112,6 @@ const stroke = getStroke(normalizedColors, elapsedTime);
 
+CountdownCircleTimer.displayName = 'CountdownCircleTimer';
+
 export {
   CountdownCircleTimer
 };

src/utils/colors.js

@@ -0,0 +0,0 @@ import { linearEase } from '.';

src/utils/getPath.js

@@ -0,0 +0,0 @@ export const getPath = (size, strokeWidth) => {

src/utils/index.js

@@ -0,0 +0,0 @@ export { uuid } from './uuid';

src/utils/linearEase.js

@@ -0,0 +0,0 @@ export const linearEase = (time, start, goal, duration) =>{

src/utils/styles.js

@@ -0,0 +0,0 @@ export const getWrapperStyle = size => ({

src/utils/uuid.js

 export const uuid = () =>  Math.random()
   .toString(36)
   .substring(2);

webpack.config.js

@@ -0,0 +0,0 @@ var path = require('path');

No alert changes

Improved metrics

Number of lines in readme file

83

increased by40.68%

Worsened metrics

Total package byte prevSize

26875

decreased by-83.62%

Dependency count

4

increased by33.33%

Number of package files

13

decreased by-38.1%

Lines of code

276

decreased by-10.97%

Dependency changes

• + Addeduse-elapsed-time@^1.1.1

• + Addeduse-elapsed-time@1.2.1(transitive)