Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@tomik23/react-circular-progress-bar
Advanced tools
@tomik23/react-circular-progress-bar - npm Package Compare versions
Comparing version 0.1.19 to 0.1.20
@@ -1,1 +0,1 @@ | ||
| import e,{createContext as r,useContext as t,useState as n,useEffect as o,useRef as i}from"react";import c from"prop-types";function a(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r&&(n=n.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,n)}return t}function l(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?a(Object(t),!0).forEach((function(r){u(e,r,t[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):a(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}))}return e}function u(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function s(e,r){return function(e){if(Array.isArray(e))return e}(e)||function(e,r){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==t)return;var n,o,i=[],c=!0,a=!1;try{for(t=t.call(e);!(c=(n=t.next()).done)&&(i.push(n.value),!r||i.length!==r);c=!0);}catch(e){a=!0,o=e}finally{try{c||null==t.return||t.return()}finally{if(a)throw o}}return i}(e,r)||function(e,r){if(!e)return;if("string"==typeof e)return f(e,r);var t=Object.prototype.toString.call(e).slice(8,-1);"Object"===t&&e.constructor&&(t=e.constructor.name);if("Map"===t||"Set"===t)return Array.from(e);if("Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t))return f(e,r)}(e,r)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function f(e,r){(null==r||r>e.length)&&(r=e.length);for(var t=0,n=new Array(r);t<r;t++)n[t]=e[t];return n}var d=r(),m=function(){var r=t(d),n=r.id,o=r.number,i=r.counter,c=r.textPosition,a=r.fontSize,l=r.fontWeight,u=r.fontColor;return o?e.createElement("text",{x:"50%",y:"50%",fontSize:a,fontWeight:l,fill:u,textAnchor:"middle",dy:c},i,e.createElement("tspan",{className:"circular-tspan-".concat(n||0)},"%")):null},p=function(){var r=t(d),n=r.stroke,o=r.strokeBottom,i=r.colorCircle;return e.createElement("circle",{cx:"50",cy:"50",r:"42",shapeRendering:"geometricPrecision",fill:"none",stroke:i,strokeWidth:o||n})},y=function(r){var n=r.children,o=t(d),i=o.id,c=o.size;return e.createElement("svg",{role:"img",width:c,height:c,"data-index":i||0,viewBox:"0 0 100 100","aria-labelledby":"circular progress bar"},n)},v=function(r){var n=r.index,o=t(d).linearGradient,i=-100,c="linear-gradient-".concat(n);return e.createElement("defs",null,e.createElement("linearGradient",{id:c},o.map((function(r,t){return i+=100,e.createElement("stop",{key:t,offset:i/(o.length-1)+"%",stopColor:r})}))))},b=function(){var r=t(d),n=r.id,o=r.linearGradient,i=r.inverse,c=r.counter,a=r.stroke,l=r.round,u=r.colorSlice,s=void 0!==o?"url(#linear-gradient-".concat(n||0,")"):u;return e.createElement(e.Fragment,null,o&&e.createElement(v,{index:n||0,linearGradient:o}),e.createElement("circle",{cx:"50%",cy:"50%",r:"42",shapeRendering:"geometricPrecision",fill:"none",style:{transform:"rotate(-90deg)",transformOrigin:"50% 50%"},stroke:s,strokeWidth:a,strokeLinecap:l?"round":"butt",strokeDashoffset:function(e,r){var t=264-e/100*264;return r?-t:t}(c,i),strokeDasharray:264}))},g=function(){var r=t(d).children;return e.createElement("div",{style:{position:"absolute",display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center",width:"100%",height:"100%"}},r||null)},h=c.bool,O=c.number,x=c.string,E=c.array,w={percent:O.isRequired,colorSlice:x,colorCircle:x,stroke:O,strokeBottom:O,round:h,opacity:O,number:h,size:O,speed:O,textPosition:x,fontSize:x,fontWeight:O,fontColor:x,linearGradient:E},j=function(e){var r=e.stroke,t=e.colorSlice,n=e.colorCircle,o=e.opacity,i=e.size;return{position:"relative",width:i,height:i,borderRadius:"50%",boxShadow:void 0===n?"inset 0px 0px ".concat(r,"px ").concat(r,"px ").concat(function(e){var r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:10,t="string"==typeof e?parseInt(e.replace("#",""),16):e;return"rgba(".concat(t>>16,",\n ").concat((65280&t)>>8,", \n ").concat(255&t,", \n ").concat(r/100,")")}(t,o)):""}},k=function(r){var t=r.children,c=r.percent,a=r.speed,u=r.animationOff,f=s(n(u?c:0),2),v=f[0],h=f[1],O=i(),x=function(e){var r=s(n(!1),2),t=r[0],i=r[1];return o((function(){var r=new IntersectionObserver((function(e){var r=s(e,1)[0];r.intersectionRatio>=.5&&i(r.isIntersecting)}),{root:null,rootMargin:"0px",threshold:.5});return e&&e.current&&r.observe(e.current),function(){r.disconnect()}}),[e]),t}(O);o((function(){var e,r;if(x)if(u)h(c);else{var t=Number(null===(e=O.current)||void 0===e||null===(r=e.dataset)||void 0===r?void 0:r.angel);if(!(c>100||c<0||t===c)){var n,o=1e3/a,i=performance.now();return n=requestAnimationFrame((function e(r){n=requestAnimationFrame(e);var a=r-i;a>=o-.1&&(i=r-a%o,t>c&&h((function(e){return e-1})),t<c&&h((function(e){return e+1})))})),function(){return cancelAnimationFrame(n)}}}}),[v,u,a,x,c]);var E=l(l({},r),{},{counter:v});return e.createElement("div",{ref:O,style:j(r),"data-angel":v},e.createElement(d.Provider,{value:E},t&&e.createElement(g,null),e.createElement(y,null,e.createElement(m,null),e.createElement(p,null),e.createElement(b,null))))};k.propTypes=w,k.defaultProps={colorSlice:"#00a1ff",round:!1,number:!0,stroke:10,opacity:10,size:200,speed:1e3,textPosition:".35em",fontSize:"1.6rem",fontColor:"#365b74",fontWeight:400};export{k as CircularProgressBar}; | ||
| import e,{createContext as t,useContext as r,useState as n,useEffect as o,useRef as i}from"react";import a from"prop-types";function c(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 l(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?c(Object(r),!0).forEach((function(t){u(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):c(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function u(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function s(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==r)return;var n,o,i=[],a=!0,c=!1;try{for(r=r.call(e);!(a=(n=r.next()).done)&&(i.push(n.value),!t||i.length!==t);a=!0);}catch(e){c=!0,o=e}finally{try{a||null==r.return||r.return()}finally{if(c)throw o}}return i}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return f(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);"Object"===r&&e.constructor&&(r=e.constructor.name);if("Map"===r||"Set"===r)return Array.from(e);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return f(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function f(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}var d=t(),m=function(){var t=r(d),n=t.id,o=t.number,i=t.counter,a=t.textPosition,c=t.fontSize,l=t.fontWeight,u=t.fontColor;return o?e.createElement("text",{x:"50%",y:"50%",fontSize:c,fontWeight:l,fill:u,textAnchor:"middle",dy:a},i,e.createElement("tspan",{className:"circular-tspan-".concat(n||0)},"%")):null},p=function(){var t=r(d),n=t.stroke,o=t.round,i=t.inverse,a=t.strokeBottom,c=t.cut,l=t.rotation,u=t.colorCircle,s=264-2.64*(100-c);return e.createElement("circle",{cx:"50",cy:"50",r:"42",shapeRendering:"geometricPrecision",fill:"none",style:{transform:"rotate(".concat(l,"deg)"),transformOrigin:"50% 50%"},stroke:u,strokeWidth:a||n,strokeLinecap:o?"round":"butt",strokeDashoffset:i?-s:s,strokeDasharray:264})},y=function(t){var n=t.children,o=r(d),i=o.id,a=o.size;return e.createElement("svg",{role:"img",width:a,height:a,"data-index":i||0,viewBox:"0 0 100 100","aria-labelledby":"circular progress bar"},n)},v=function(t){var n=t.index,o=r(d).linearGradient,i=-100,a="linear-gradient-".concat(n);return e.createElement("defs",null,e.createElement("linearGradient",{id:a},o.map((function(t,r){return i+=100,e.createElement("stop",{key:r,offset:i/(o.length-1)+"%",stopColor:t})}))))},b=function(){var t=r(d),n=t.id,o=t.rotation,i=t.linearGradient,a=t.inverse,c=t.counter,l=t.stroke,u=t.round,s=t.cut,f=t.colorSlice,m=void 0!==i?"url(#linear-gradient-".concat(n||0,")"):f;return e.createElement(e.Fragment,null,i&&e.createElement(v,{index:n||0,linearGradient:i}),e.createElement("circle",{cx:"50%",cy:"50%",r:"42",shapeRendering:"geometricPrecision",fill:"none",style:{transform:"rotate(".concat(o,"deg)"),transformOrigin:"50% 50%"},stroke:m,strokeWidth:l,strokeLinecap:u?"round":"butt",strokeDashoffset:function(e,t,r){var n=264-e/100*(t?2.64*(100-t):264);return r?-n:n}(c,s,a),strokeDasharray:264}))},g=function(){var t=r(d).children;return e.createElement("div",{style:{position:"absolute",display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center",width:"100%",height:"100%"}},t||null)},h=a.bool,O=a.number,x=a.string,E=a.array,k={percent:O.isRequired,colorSlice:x,colorCircle:x,stroke:O,strokeBottom:O,round:h,opacity:O,number:h,size:O,speed:O,textPosition:x,fontSize:x,fontWeight:O,fontColor:x,linearGradient:E},w=function(e){var t=e.stroke,r=e.colorSlice,n=e.colorCircle,o=e.opacity,i=e.size;return{position:"relative",width:i,height:i,borderRadius:"50%",boxShadow:void 0===n?"inset 0px 0px ".concat(t,"px ").concat(t,"px ").concat(function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:10,r="string"==typeof e?parseInt(e.replace("#",""),16):e;return"rgba(".concat(r>>16,",\n ").concat((65280&r)>>8,", \n ").concat(255&r,", \n ").concat(t/100,")")}(r,o)):""}},j=function(t){var r=t.children,a=t.percent,c=t.speed,u=t.animationOff,f=s(n(u?a:0),2),v=f[0],h=f[1],O=i(),x=function(e){var t=s(n(!1),2),r=t[0],i=t[1];return o((function(){var t=new IntersectionObserver((function(e){var t=s(e,1)[0];t.intersectionRatio>=.5&&i(t.isIntersecting)}),{root:null,rootMargin:"0px",threshold:.5});return e&&e.current&&t.observe(e.current),function(){t.disconnect()}}),[e]),r}(O);o((function(){var e,t;if(x)if(u)h(a);else{var r=Number(null===(e=O.current)||void 0===e||null===(t=e.dataset)||void 0===t?void 0:t.angel);if(!(a>100||a<0||r===a)){var n,o=1e3/c,i=performance.now();return n=requestAnimationFrame((function e(t){n=requestAnimationFrame(e);var c=t-i;c>=o-.1&&(i=t-c%o,r>a&&h((function(e){return e-1})),r<a&&h((function(e){return e+1})))})),function(){return cancelAnimationFrame(n)}}}}),[v,u,c,x,a]);var E=l(l({},t),{},{counter:v});return e.createElement("div",{ref:O,style:w(t),"data-angel":v},e.createElement(d.Provider,{value:E},r&&e.createElement(g,null),e.createElement(y,null,e.createElement(m,null),e.createElement(p,null),e.createElement(b,null))))};j.propTypes=k,j.defaultProps={colorSlice:"#00a1ff",round:!1,number:!0,stroke:10,opacity:10,size:200,speed:1e3,cut:0,rotation:-90,textPosition:".35em",fontSize:"1.6rem",fontColor:"#365b74",fontWeight:400};export{j as CircularProgressBar}; |
@@ -1,1 +0,1 @@ | ||
| "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("prop-types");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=r(e),o=r(t);function i(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 a(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?i(Object(r),!0).forEach((function(t){l(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):i(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function l(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function c(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==r)return;var n,o,i=[],a=!0,l=!1;try{for(r=r.call(e);!(a=(n=r.next()).done)&&(i.push(n.value),!t||i.length!==t);a=!0);}catch(e){l=!0,o=e}finally{try{a||null==r.return||r.return()}finally{if(l)throw o}}return i}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return u(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);"Object"===r&&e.constructor&&(r=e.constructor.name);if("Map"===r||"Set"===r)return Array.from(e);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return u(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function u(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}var f=e.createContext(),s=function(){var t=e.useContext(f),r=t.id,o=t.number,i=t.counter,a=t.textPosition,l=t.fontSize,c=t.fontWeight,u=t.fontColor;return o?n.default.createElement("text",{x:"50%",y:"50%",fontSize:l,fontWeight:c,fill:u,textAnchor:"middle",dy:a},i,n.default.createElement("tspan",{className:"circular-tspan-".concat(r||0)},"%")):null},d=function(){var t=e.useContext(f),r=t.stroke,o=t.strokeBottom,i=t.colorCircle;return n.default.createElement("circle",{cx:"50",cy:"50",r:"42",shapeRendering:"geometricPrecision",fill:"none",stroke:i,strokeWidth:o||r})},p=function(t){var r=t.children,o=e.useContext(f),i=o.id,a=o.size;return n.default.createElement("svg",{role:"img",width:a,height:a,"data-index":i||0,viewBox:"0 0 100 100","aria-labelledby":"circular progress bar"},r)},m=function(t){var r=t.index,o=e.useContext(f).linearGradient,i=-100,a="linear-gradient-".concat(r);return n.default.createElement("defs",null,n.default.createElement("linearGradient",{id:a},o.map((function(e,t){return i+=100,n.default.createElement("stop",{key:t,offset:i/(o.length-1)+"%",stopColor:e})}))))},v=function(){var t=e.useContext(f),r=t.id,o=t.linearGradient,i=t.inverse,a=t.counter,l=t.stroke,c=t.round,u=t.colorSlice,s=void 0!==o?"url(#linear-gradient-".concat(r||0,")"):u;return n.default.createElement(n.default.Fragment,null,o&&n.default.createElement(m,{index:r||0,linearGradient:o}),n.default.createElement("circle",{cx:"50%",cy:"50%",r:"42",shapeRendering:"geometricPrecision",fill:"none",style:{transform:"rotate(-90deg)",transformOrigin:"50% 50%"},stroke:s,strokeWidth:l,strokeLinecap:c?"round":"butt",strokeDashoffset:function(e,t){var r=264-e/100*264;return t?-r:r}(a,i),strokeDasharray:264}))},y=function(){var t=e.useContext(f).children;return n.default.createElement("div",{style:{position:"absolute",display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center",width:"100%",height:"100%"}},t||null)},b=o.default.bool,g=o.default.number,h=o.default.string,x=o.default.array,O={percent:g.isRequired,colorSlice:h,colorCircle:h,stroke:g,strokeBottom:g,round:b,opacity:g,number:b,size:g,speed:g,textPosition:h,fontSize:h,fontWeight:g,fontColor:h,linearGradient:x},E=function(e){var t=e.stroke,r=e.colorSlice,n=e.colorCircle,o=e.opacity,i=e.size;return{position:"relative",width:i,height:i,borderRadius:"50%",boxShadow:void 0===n?"inset 0px 0px ".concat(t,"px ").concat(t,"px ").concat(function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:10,r="string"==typeof e?parseInt(e.replace("#",""),16):e;return"rgba(".concat(r>>16,",\n ").concat((65280&r)>>8,", \n ").concat(255&r,", \n ").concat(t/100,")")}(r,o)):""}},j=function(t){var r=t.children,o=t.percent,i=t.speed,l=t.animationOff,u=c(e.useState(l?o:0),2),m=u[0],b=u[1],g=e.useRef(),h=function(t){var r=c(e.useState(!1),2),n=r[0],o=r[1];return e.useEffect((function(){var e=new IntersectionObserver((function(e){var t=c(e,1)[0];t.intersectionRatio>=.5&&o(t.isIntersecting)}),{root:null,rootMargin:"0px",threshold:.5});return t&&t.current&&e.observe(t.current),function(){e.disconnect()}}),[t]),n}(g);e.useEffect((function(){var e,t;if(h)if(l)b(o);else{var r=Number(null===(e=g.current)||void 0===e||null===(t=e.dataset)||void 0===t?void 0:t.angel);if(!(o>100||o<0||r===o)){var n,a=1e3/i,c=performance.now();return n=requestAnimationFrame((function e(t){n=requestAnimationFrame(e);var i=t-c;i>=a-.1&&(c=t-i%a,r>o&&b((function(e){return e-1})),r<o&&b((function(e){return e+1})))})),function(){return cancelAnimationFrame(n)}}}}),[m,l,i,h,o]);var x=a(a({},t),{},{counter:m});return n.default.createElement("div",{ref:g,style:E(t),"data-angel":m},n.default.createElement(f.Provider,{value:x},r&&n.default.createElement(y,null),n.default.createElement(p,null,n.default.createElement(s,null),n.default.createElement(d,null),n.default.createElement(v,null))))};j.propTypes=O,j.defaultProps={colorSlice:"#00a1ff",round:!1,number:!0,stroke:10,opacity:10,size:200,speed:1e3,textPosition:".35em",fontSize:"1.6rem",fontColor:"#365b74",fontWeight:400},exports.CircularProgressBar=j; | ||
| "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("prop-types");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=r(e),o=r(t);function a(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 i(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?a(Object(r),!0).forEach((function(t){c(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):a(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function c(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function l(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==r)return;var n,o,a=[],i=!0,c=!1;try{for(r=r.call(e);!(i=(n=r.next()).done)&&(a.push(n.value),!t||a.length!==t);i=!0);}catch(e){c=!0,o=e}finally{try{i||null==r.return||r.return()}finally{if(c)throw o}}return a}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return u(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);"Object"===r&&e.constructor&&(r=e.constructor.name);if("Map"===r||"Set"===r)return Array.from(e);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return u(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function u(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}var f=e.createContext(),s=function(){var t=e.useContext(f),r=t.id,o=t.number,a=t.counter,i=t.textPosition,c=t.fontSize,l=t.fontWeight,u=t.fontColor;return o?n.default.createElement("text",{x:"50%",y:"50%",fontSize:c,fontWeight:l,fill:u,textAnchor:"middle",dy:i},a,n.default.createElement("tspan",{className:"circular-tspan-".concat(r||0)},"%")):null},d=function(){var t=e.useContext(f),r=t.stroke,o=t.round,a=t.inverse,i=t.strokeBottom,c=t.cut,l=t.rotation,u=t.colorCircle,s=264-2.64*(100-c);return n.default.createElement("circle",{cx:"50",cy:"50",r:"42",shapeRendering:"geometricPrecision",fill:"none",style:{transform:"rotate(".concat(l,"deg)"),transformOrigin:"50% 50%"},stroke:u,strokeWidth:i||r,strokeLinecap:o?"round":"butt",strokeDashoffset:a?-s:s,strokeDasharray:264})},p=function(t){var r=t.children,o=e.useContext(f),a=o.id,i=o.size;return n.default.createElement("svg",{role:"img",width:i,height:i,"data-index":a||0,viewBox:"0 0 100 100","aria-labelledby":"circular progress bar"},r)},m=function(t){var r=t.index,o=e.useContext(f).linearGradient,a=-100,i="linear-gradient-".concat(r);return n.default.createElement("defs",null,n.default.createElement("linearGradient",{id:i},o.map((function(e,t){return a+=100,n.default.createElement("stop",{key:t,offset:a/(o.length-1)+"%",stopColor:e})}))))},y=function(){var t=e.useContext(f),r=t.id,o=t.rotation,a=t.linearGradient,i=t.inverse,c=t.counter,l=t.stroke,u=t.round,s=t.cut,d=t.colorSlice,p=void 0!==a?"url(#linear-gradient-".concat(r||0,")"):d;return n.default.createElement(n.default.Fragment,null,a&&n.default.createElement(m,{index:r||0,linearGradient:a}),n.default.createElement("circle",{cx:"50%",cy:"50%",r:"42",shapeRendering:"geometricPrecision",fill:"none",style:{transform:"rotate(".concat(o,"deg)"),transformOrigin:"50% 50%"},stroke:p,strokeWidth:l,strokeLinecap:u?"round":"butt",strokeDashoffset:function(e,t,r){var n=264-e/100*(t?2.64*(100-t):264);return r?-n:n}(c,s,i),strokeDasharray:264}))},v=function(){var t=e.useContext(f).children;return n.default.createElement("div",{style:{position:"absolute",display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center",width:"100%",height:"100%"}},t||null)},b=o.default.bool,g=o.default.number,h=o.default.string,x=o.default.array,O={percent:g.isRequired,colorSlice:h,colorCircle:h,stroke:g,strokeBottom:g,round:b,opacity:g,number:b,size:g,speed:g,textPosition:h,fontSize:h,fontWeight:g,fontColor:h,linearGradient:x},E=function(e){var t=e.stroke,r=e.colorSlice,n=e.colorCircle,o=e.opacity,a=e.size;return{position:"relative",width:a,height:a,borderRadius:"50%",boxShadow:void 0===n?"inset 0px 0px ".concat(t,"px ").concat(t,"px ").concat(function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:10,r="string"==typeof e?parseInt(e.replace("#",""),16):e;return"rgba(".concat(r>>16,",\n ").concat((65280&r)>>8,", \n ").concat(255&r,", \n ").concat(t/100,")")}(r,o)):""}},k=function(t){var r=t.children,o=t.percent,a=t.speed,c=t.animationOff,u=l(e.useState(c?o:0),2),m=u[0],b=u[1],g=e.useRef(),h=function(t){var r=l(e.useState(!1),2),n=r[0],o=r[1];return e.useEffect((function(){var e=new IntersectionObserver((function(e){var t=l(e,1)[0];t.intersectionRatio>=.5&&o(t.isIntersecting)}),{root:null,rootMargin:"0px",threshold:.5});return t&&t.current&&e.observe(t.current),function(){e.disconnect()}}),[t]),n}(g);e.useEffect((function(){var e,t;if(h)if(c)b(o);else{var r=Number(null===(e=g.current)||void 0===e||null===(t=e.dataset)||void 0===t?void 0:t.angel);if(!(o>100||o<0||r===o)){var n,i=1e3/a,l=performance.now();return n=requestAnimationFrame((function e(t){n=requestAnimationFrame(e);var a=t-l;a>=i-.1&&(l=t-a%i,r>o&&b((function(e){return e-1})),r<o&&b((function(e){return e+1})))})),function(){return cancelAnimationFrame(n)}}}}),[m,c,a,h,o]);var x=i(i({},t),{},{counter:m});return n.default.createElement("div",{ref:g,style:E(t),"data-angel":m},n.default.createElement(f.Provider,{value:x},r&&n.default.createElement(v,null),n.default.createElement(p,null,n.default.createElement(s,null),n.default.createElement(d,null),n.default.createElement(y,null))))};k.propTypes=O,k.defaultProps={colorSlice:"#00a1ff",round:!1,number:!0,stroke:10,opacity:10,size:200,speed:1e3,cut:0,rotation:-90,textPosition:".35em",fontSize:"1.6rem",fontColor:"#365b74",fontWeight:400},exports.CircularProgressBar=k; |
| { | ||
| "name": "@tomik23/react-circular-progress-bar", | ||
| "version": "0.1.19", | ||
| "version": "0.1.20", | ||
| "private": false, | ||
@@ -5,0 +5,0 @@ "license": "MIT", |
121
README.md
@@ -6,3 +6,3 @@ <h1 align="center"> | ||
| <p align="center"> | ||
| React library to help developers to draw animated, cross-browser, highly customizable progress circles using SVG. | ||
| React library to help developers to draw animated, cross-browser, highly customizable progress circles using SVG. IntersectionObserver support, the animation starts when the individual chart appears in the view. | ||
| </p> | ||
@@ -27,2 +27,3 @@ | ||
| ## Demo | ||
| See the demo - [example](https://tomik23.github.io/react-circular-progress-bar/) | ||
@@ -39,4 +40,5 @@ | ||
| ## Usage | ||
| ```jsx | ||
| import { CircularProgressBar } from '@tomik23/react-circular-progress-bar' | ||
| import { CircularProgressBar } from "@tomik23/react-circular-progress-bar"; | ||
| ``` | ||
@@ -48,6 +50,6 @@ | ||
| percent: 60, // is require | ||
| colorSlice: '#00a1ff', | ||
| colorCircle: '#00a1ff', | ||
| fontColor: '#365b74', | ||
| fontSize: '1.6rem', | ||
| colorSlice: "#00a1ff", | ||
| colorCircle: "#00a1ff", | ||
| fontColor: "#365b74", | ||
| fontSize: "1.6rem", | ||
| fontWeight: 400, | ||
@@ -57,15 +59,21 @@ size: 200, | ||
| strokeBottom: 5, | ||
| seed: 60, | ||
| speed: 60, | ||
| cut: 0, | ||
| rotation: -90, | ||
| opacity: 10, | ||
| textPosition: '0.35em', | ||
| textPosition: "0.35em", | ||
| animationOff: false, | ||
| inverse: false, | ||
| round: false, | ||
| number: true, | ||
| linearGradient: ["#ffff00", "brown"] | ||
| } | ||
| }; | ||
| <CircularProgressBar {...props} /> | ||
| ``` | ||
| ### Update percent | ||
| > If you want to update component you have to add `id` to each of them | ||
| ```jsx | ||
@@ -75,4 +83,4 @@ const config = { | ||
| percent: 50, | ||
| colorSlice: '#E91E63', | ||
| } | ||
| colorSlice: "#E91E63" | ||
| }; | ||
@@ -87,3 +95,3 @@ function App() { | ||
| id: 0, // we indicate which component we want to change | ||
| percent: Math.floor(Math.random() * 100 + 1), | ||
| percent: Math.floor(Math.random() * 100 + 1) | ||
| }); | ||
@@ -105,2 +113,3 @@ }, 3000); | ||
| ### Add photos and text | ||
| <p align="center"> | ||
@@ -113,7 +122,7 @@ <img src="https://raw.githubusercontent.com/tomik23/react-circular-progress-bar/main/assets/image-with-text.png"> | ||
| percent: 55, | ||
| colorSlice: '#E91E63', | ||
| colorCircle: '#f1f1f1', | ||
| colorSlice: "#E91E63", | ||
| colorCircle: "#f1f1f1", | ||
| fontWeight: 100, | ||
| number: false // turn off the percentage animation first | ||
| } | ||
| }; | ||
@@ -123,12 +132,11 @@ <CircularProgressBar key={index} {...props}> | ||
| src="https://picsum.photos/100/100" | ||
| // | ||
| style={{ | ||
| width: '60px', | ||
| borderRadius: '50%', | ||
| padding: '2px', | ||
| border: '3px solid salmon', | ||
| width: "60px", | ||
| borderRadius: "50%", | ||
| padding: "2px", | ||
| border: "3px solid salmon" | ||
| }} | ||
| alt="Random image" | ||
| /> | ||
| <div style={{ textAlign: 'center', padding: '0 35px' }}> | ||
| <div style={{ textAlign: "center", padding: "0 35px" }}> | ||
| Lorem, ipsum dolor. | ||
@@ -140,2 +148,3 @@ </div> | ||
| ### Add photos and percent animation | ||
| <p align="center"> | ||
@@ -148,8 +157,8 @@ <img src="https://raw.githubusercontent.com/tomik23/react-circular-progress-bar/main/assets/image-with-procent.png"> | ||
| percent: 55, | ||
| colorSlice: '#CDDC39', | ||
| colorCircle: '#f1f1f1', | ||
| colorSlice: "#CDDC39", | ||
| colorCircle: "#f1f1f1", | ||
| fontWeight: 100, | ||
| fontSize: '1rem', | ||
| textPosition: '1.5em', // needed element to move the percentage animation lower | ||
| } | ||
| fontSize: "1rem", | ||
| textPosition: "1.5em" // needed element to move the percentage animation lower | ||
| }; | ||
@@ -159,9 +168,8 @@ <CircularProgressBar key={index} {...props}> | ||
| src="https://picsum.photos/100/100" | ||
| // | ||
| style={{ | ||
| width: '60px', | ||
| borderRadius: '50%', | ||
| marginTop: '-40px', | ||
| padding: '2px', | ||
| border: '3px solid salmon', | ||
| width: "60px", | ||
| borderRadius: "50%", | ||
| marginTop: "-40px", | ||
| padding: "2px", | ||
| border: "3px solid salmon" | ||
| }} | ||
@@ -174,2 +182,3 @@ alt="Random image" | ||
| ### How to turn off `%`? | ||
| Turning off the percentage and leaving the number alone is very simple. | ||
@@ -180,26 +189,28 @@ Each percent (%) has a class of `circular-tspan-x` of course you must add for each circle` id`. If you don't do this, the class will always be `circular-tspan-0`. Just add `.circular-tspan-x {display: none}` to our styles. Digit animation remains but percent sign [%] disappears. | ||
| props | type | default | require | description | ||
| ---- | :-------: | :-------: | :--------: | ----------- | ||
| percent | number | | ✔ | Represents the progress bar and animation of the animation progress expressed by a number e.g. 65% | ||
| id | number | | | If you want to update a component, you need to add an `id` to each of them. Also when you want to display several components with different gradients - `linearGradient` | ||
| speed | number | | | Frame rate animation [fps]. Let's say you want the animation to be 60fps, just add the parameter `speed: 60` | ||
| animationOff | boolean | `false` | | Turn off the progress animation | ||
| colorSlice | string | `'#00a1ff'` | | Progress layer color and background ["#ffff00","brown" *](#colors-names) | ||
| colorCircle | string | `'#00a1ff'` | | Bottom circle color Font ["#ffff00","brown" *](#colors-names) | ||
| stroke | number | `10` | | Stroke width, chart thickness | ||
| strokeBottom | number | `10` | | If "strokBottom" is set, it is used to generate a background circle size | ||
| round | boolean | `false` | | Path rounding | ||
| invers | boolean | `false` | | Counterclockwise animation | ||
| opacity | number | `10` | | Opacity box-shadow, 10 = 1, 9 = 0.9 ... 1 = 0.1 | ||
| number | boolean | `true` | | Add props number and set to false to hide the number with percent | ||
| size | number | `200` | | Size progress bar width and height in px | ||
| textPosition | string | `0.35em` | | The position of the SVG TEXT element vertically | ||
| fontSize | string | `1.6rem` | | Font size. The font can be shown in units rem, em, px ... | ||
| fontWeight | number | `400` | | 400, 600, ... | ||
| fontColor | string | `'#365b74'` | | Font color ["#ffff00","brown" *](#colors-names) | ||
| linearGradient | array | | | Array of colors "lineargradient": ["#ffff00","brown" *](#colors-names) | ||
| | props | type | default | require | description | | ||
| | -------------- | :-----: | :---------: | :-----: | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | ||
| | percent | number | | ✔ | Represents the progress bar and animation of the animation progress expressed by a number e.g. 65% | | ||
| | id | number | | | If you want to update a component, you need to add an `id` to each of them. Also when you want to display several components with different gradients - `linearGradient` | | ||
| | speed | number | | | Frame rate animation [fps]. Let's say you want the animation to be 60fps, just add the parameter `speed: 60` | | ||
| | animationOff | boolean | `false` | | Turn off the progress animation | | ||
| | colorSlice | string | `'#00a1ff'` | | Progress layer color and background ["#ffff00","brown" \*](#colors-names) | | ||
| | colorCircle | string | `'#00a1ff'` | | Bottom circle color Font ["#ffff00","brown" \*](#colors-names) | | ||
| | stroke | number | `10` | | Stroke width, chart thickness | | ||
| | strokeBottom | number | `10` | | If "strokBottom" is set, it is used to generate a background circle size | | ||
| | round | boolean | `false` | | Path rounding | | ||
| | inverse | boolean | `false` | | Counterclockwise animation | | ||
| | opacity | number | `10` | | Opacity box-shadow, 10 = 1, 9 = 0.9 ... 1 = 0.1 | | ||
| | rotation | number | `-90` | | Chart rotation | | ||
| | number | boolean | `true` | | Add props number and set to false to hide the number with percent | | ||
| | size | number | `200` | | Size progress bar width and height in px | | ||
| | cut | number | `0` | | Angle of the circle sector | | ||
| | textPosition | string | `0.35em` | | The position of the SVG TEXT element vertically | | ||
| | fontSize | string | `1.6rem` | | Font size. The font can be shown in units rem, em, px ... | | ||
| | fontWeight | number | `400` | | 400, 600, ... | | ||
| | fontColor | string | `'#365b74'` | | Font color ["#ffff00","brown" \*](#colors-names) | | ||
| | linearGradient | array | | | Array of colors "lineargradient": ["#ffff00","brown" \*](#colors-names) | | ||
| ## Colors names | ||
| [* See colors names](https://htmlcolorcodes.com/color-names/) | ||
| [\* See colors names](https://htmlcolorcodes.com/color-names/) | ||
@@ -209,3 +220,3 @@ ## Browsers support | ||
| | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Opera | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/vivaldi/vivaldi_48x48.png" alt="Vivaldi" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Vivaldi | | ||
| | --------- | --------- | --------- | --------- | --------- | | ||
| | IE11+, Edge| last 2 versions| last 2 versions| last 2 versions| last 2 versions | ||
| | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ||
| | IE11+, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions | |
New alerts
License Policy Violation
LicenseThis 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
LicenseThis 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
- increased by25.99%
28806
- Number of package files
- increased by20%
6
- Lines of code
- increased by4.44%
47
- Number of lines in readme file
- increased by6.15%
207
No dependency changes