New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

react-countdown-circle-timer

Package Overview
Dependencies
Maintainers
1
Versions
48
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

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

Comparing version 1.0.3 to 1.0.4

5

CHANGELOG.md
# Change Log
## 1.0.4 (December 3rd, 2019)
**Implemented enhancements:**
- Add `a11y` support by exposing two additional props `ariaLabel` and `renderAriaTime`
## 1.0.3 (November 16th, 2019)

@@ -4,0 +9,0 @@

2

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=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"}]);
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%"},d={position:"absolute",width:"1px",height:"1px",margin:"-1px",border:0,clip:"rect(0 0 0 0)",padding:0,overflow:"hidden",whiteSpace:"nowrap",wordWrap:"normal"};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 b(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 m=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,")")},v=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:m(e[0]),key:t};return[b({},e[0],{gradient:u}),e[1]]}))};function g(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 O}));var h=function(e,t){return e?"countdown-circle-timer-gradient-".concat(t||Math.random().toString(36).substring(2)):""},O=function(e){var t=e.size,r=e.strokeWidth,i=e.trailColor,a=e.durationSeconds,p=e.isPlaying,y=e.colors,O=e.strokeLinecap,j=e.renderTime,w=e.isLinearGradient,x=e.gradientUniqueKey,T=e.onComplete,P=e.ariaLabel,E=e.renderAriaTime,S=Object(n.useRef)(null),k=g(Object(n.useState)(0),2),_=k[0],M=k[1],C=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]),A=Object(n.useMemo)((function(){return 1e3*a}),[a]),L=Object(n.useMemo)((function(){return function(e,t,r){var n=v(e,0,r),o=0;return n.map((function(e,r){var i=n.length===r+1;if(o>=t||i)return o=t,b({},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,b({},e[0],{},f,{colorStartTime:a,colorEndTime:u,duration:u-a})}))}(y,A,w)}),[y,A,w]),R=Object(n.useMemo)((function(){return h(w,x)}),[w,x]);Object(n.useEffect)((function(){var e=S.current.getTotalLength().toFixed(2);M(e)}),[]);var q=Object(c.useElapsedTime)(p,{durationMilliseconds:A,onComplete:T}),F=u(q,0,_,A).toFixed(2),W=function(e,t){if(1===e.length)return m(e[0]);var r=e.find((function(e){var r=e.colorEndTime;return t<=r}));if(void 0===r.duration)return m(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 m({r:o,g:i,b:a,opacity:r.opacity})}(L,q),I=Math.ceil((A-q)/1e3);return o.a.createElement("div",{style:l(t),"aria-label":P},o.a.createElement("svg",{width:t,height:t,style:s,xmlns:"http://www.w3.org/2000/svg"},w&&o.a.createElement("defs",null,o.a.createElement("linearGradient",{id:R,x1:"100%",y1:"0%",x2:"0%",y2:"0%"},L.map((function(e){return o.a.createElement("stop",e.gradient)})))),o.a.createElement("path",{fill:"none",strokeWidth:r,stroke:i,d:C}),o.a.createElement("path",{fill:"none",stroke:w?"url(#".concat(R,")"):W,d:C,ref:S,strokeLinecap:O,strokeWidth:r,strokeDasharray:_,strokeDashoffset:F})),"function"==typeof j&&o.a.createElement("div",{"aria-hidden":"true",style:f(W,t)},j(I,q,p)),"function"==typeof E&&o.a.createElement("div",{role:"timer","aria-live":"assertive",style:d},E(I,q,p)))};O.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,ariaLabel:a.a.string,renderAriaTime:a.a.func},O.defaultProps={size:180,strokeWidth:12,trailColor:"#d9d9d9",isPlaying:!1,strokeLinecap:"round",isLinearGradient:!1,ariaLabel:"Countdown timer"},O.displayName="CountdownCircleTimer"}]);

2

package.json
{
"name": "react-countdown-circle-timer",
"version": "1.0.3",
"version": "1.0.4",
"description": "Lightweight React countdown timer component with color and progress animation based on SVG",

@@ -5,0 +5,0 @@ "main": "./lib/index.js",

16

README.md

@@ -6,3 +6,3 @@ # React Countdown Circle Timer

* Lightweight only 8kB
* Lightweight only 9.5kB
* Performance optimized with single `requestAnimationFrame` loop to animate color and progress (no `setInterval` used)

@@ -12,2 +12,3 @@ * Transition between colors during the countdown

* Fully customizable content in the center of the circle
* `a11y` support

@@ -53,9 +54,11 @@ ## Installation

| strokeWidth | number | 12 | Path stroke width |
| strokeLinecap | Enum{ 'round', 'square' } | 'round' | Path stroke line cap |
| trailColor | string | '#d9d9d9' | Circle trail color - takes any valid color format (HEX, rgb, rgba, etc.) |
| strokeLinecap | Enum{ 'round', 'square' } | round | Path stroke line cap |
| trailColor | string | #d9d9d9 | Circle trail color - takes any valid color format (HEX, rgb, rgba, etc.) |
| isPlaying | boolean | false | Play and pause animation |
| * isLinearGradient | boolean | false | * Apples linear gradient on top of the circle. The gradient doesn't follow the circle path. Works best with two colors. |
| gradientUniqueKey | string | - | Unique ID for the linearGradient element. It takes random ID if it's not provided. |
| 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(): 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. |
| renderTime | function(remainingTime: number, elapsedTime: number, isPlaying: boolean): number\|string\|ReactNode | - | Render prop function to customize the content in the center of the circle. The content is centered using flexbox. |
| onComplete | function(): undefined \| [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. |
| ariaLabel | string | Countdown timer | Aria label for the whole component |
| renderAriaTime | function(remainingTime: number, elapsedTime: number, isPlaying: boolean): number\|string\|ReactNode | - | Render prop function to customize the text message that will be red by the screen reader. |

@@ -73,3 +76,3 @@ ## Recipes

// do your stuff here
return [true, 1500]; // repeate animation in 1.5 seconds
return [true, 1500]; // repeat animation in 1.5 seconds
}}

@@ -86,2 +89,1 @@ isPlaying

* Test coverage
* `a11y` support

32

src/index.jsx

@@ -13,3 +13,4 @@ import React, { useEffect, useState, useRef, useMemo } from 'react';

getStroke,
colorsValidator
colorsValidator,
visuallyHidden
} from './utils';

@@ -33,3 +34,5 @@

gradientUniqueKey,
onComplete
onComplete,
ariaLabel,
renderAriaTime
} = props;

@@ -55,3 +58,6 @@

return (
<div style={getWrapperStyle(size)}>
<div
style={getWrapperStyle(size)}
aria-label={ariaLabel}
>
<svg width={size} height={size} style={svgStyle} xmlns="http://www.w3.org/2000/svg">

@@ -82,5 +88,12 @@ {isLinearGradient && (

</svg>
<div style={getTimeStyle(stroke, size)}>
{typeof renderTime === 'function' && renderTime(remainingTime, elapsedTime, isPlaying)}
</div>
{typeof renderTime === 'function' && (
<div aria-hidden="true" style={getTimeStyle(stroke, size)}>
{renderTime(remainingTime, elapsedTime, isPlaying)}
</div>
)}
{typeof renderAriaTime === 'function' && (
<div role="timer" aria-live="assertive" style={visuallyHidden}>
{renderAriaTime(remainingTime, elapsedTime, isPlaying)}
</div>
)}
</div>

@@ -103,3 +116,5 @@ );

gradientUniqueKey: PropTypes.string,
onComplete: PropTypes.func
onComplete: PropTypes.func,
ariaLabel: PropTypes.string,
renderAriaTime: PropTypes.func
};

@@ -113,3 +128,4 @@

strokeLinecap: 'round',
isLinearGradient: false
isLinearGradient: false,
ariaLabel: 'Countdown timer'
};

@@ -116,0 +132,0 @@

2

src/utils/index.js
export { uuid } from './uuid';
export { linearEase } from './linearEase';
export { getPath } from './getPath';
export { getWrapperStyle, getTimeStyle, svgStyle } from './styles';
export { getWrapperStyle, getTimeStyle, svgStyle, visuallyHidden } from './styles';
export { getColorsRGB, getNormalizedColors, getStroke, colorsValidator } from './colors';

13

src/utils/styles.js

@@ -28,2 +28,15 @@ export const getWrapperStyle = size => ({

height: '100%'
};
export const visuallyHidden = {
position: 'absolute',
width: '1px',
height: '1px',
margin: '-1px',
border: 0,
clip: 'rect(0 0 0 0)',
padding: 0,
overflow: 'hidden',
whiteSpace: 'nowrap',
wordWrap: 'normal'
};
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc