react-slot-counter - npm Package Compare versions

Comparing version 1.13.1 to 1.14.0

lib/index.d.ts

@@ -11,7 +11,7 @@ import React from 'react';
     autoAnimationStart?: boolean;
+    animateUnchanged?: boolean;
+    hasInfiniteList?: boolean;
     containerClassName?: string;
     charClassName?: string;
     separatorClassName?: string;
-    animateUnchanged?: boolean;
-    hasInfiniteList?: boolean;
     valueClassName?: string;
@@ -18,0 +18,0 @@ sequentialAnimationMode?: boolean;

lib/index.esm.js

 'use client';
-import n,{memo as e,useState as t,useRef as r,useEffect as a,forwardRef as i,useMemo as o,useCallback as u,useImperativeHandle as l}from"react";var c=function(){return c=Object.assign||function(n){for(var e,t=1,r=arguments.length;t<r;t++)for(var a in e=arguments[t])Object.prototype.hasOwnProperty.call(e,a)&&(n[a]=e[a]);return n},c.apply(this,arguments)};var s=function(){for(var n=[],e=0;e<arguments.length;e++)n[e]=arguments[e];return n.filter(Boolean).join(" ")},d=function(n,e){for(var t=[],r=n;r<e;r+=1)t.push(r);return t},f=function(n,e){var t=Math.random()*(e-n);return Math.floor(t+n)},m=function(n){for(var e,t=function(n,e,t){if(t||2===arguments.length)for(var r,a=0,i=e.length;a<i;a++)!r&&a in e||(r||(r=Array.prototype.slice.call(e,0,a)),r[a]=e[a]);return n.concat(r||Array.prototype.slice.call(e))}([],n,!0),r=t.length-1;r>0;r-=1){var a=Math.floor(Math.random()*(r+1));e=[t[a],t[r]],t[r]=e[0],t[a]=e[1]}return t},v=function(n){return"number"==typeof n?n:(Array.isArray(n)?n.join(""):n).replace(/[,.]/g,"")},h=function(n){return"object"!=typeof n&&!Number.isNaN(v(n))},p=function(n){return"object"==typeof n};var y="index-module_slot_wrap__ZT-DX",g="index-module_slot__DpPgW",_="index-module_separator__7GhtE",b="index-module_numbers__sqlqm",x="index-module_num__j6XH3";!function(n,e){void 0===e&&(e={});var t=e.insertAt;if(n&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===t&&r.firstChild?r.insertBefore(a,r.firstChild):r.appendChild(a),a.styleSheet?a.styleSheet.cssText=n:a.appendChild(document.createTextNode(n))}}(".index-module_slot_wrap__ZT-DX {\n  display: inline-block;\n  white-space: nowrap;\n}\n\n.index-module_slot__DpPgW {\n  display: inline-block;\n  overflow: hidden;\n  text-align: center;\n  vertical-align: bottom;\n  will-change: transform;\n}\n\n.index-module_separator__7GhtE {\n  display: inline-block;\n  vertical-align: bottom;\n  text-align: center;\n}\n\n.index-module_numbers__sqlqm {\n  display: block;\n}\n\n.index-module_num__j6XH3 {\n  display: block;\n}");var N="undefined"!=typeof window?n.useLayoutEffect:n.useEffect;var C=e((function(e){var i=e.charClassName,o=e.numbersRef,u=e.active,l=e.isChanged,f=e.effectiveDuration,v=e.delay,p=e.value,y=e.startValue,_=e.dummyList,C=e.hasInfiniteList,A=e.valueClassName,E=e.reverse,M=e.sequentialAnimationMode,w=e.useMonospaceWidth,S=t(!1),T=S[0],j=S[1],k=t(p),q=k[0],D=k[1],L=r(),O=r(p),B=r(null),W=t(M?_:m(_)),V=W[0],X=W[1],Y=t(0),H=Y[0],I=Y[1],P=t(0),R=P[0],F=P[1],G=t(!1),Z=G[0],J=G[1],U=H*(_.length+1),z="object"!=typeof p&&h(p);N((function(){J(!0)}),[]),N((function(){var n,e;I(null!==(e=null===(n=B.current)||void 0===n?void 0:n.offsetHeight)&&void 0!==e?e:0)}),[Z]),N((function(){if(z&&w){var n=d(0,10).map((function(n){var e,t,r=document.createElement("div");r.style.position="absolute",r.style.top="0",r.style.left="-9999px",r.style.visibility="hidden",r.textContent=n.toString(),null===(e=B.current)||void 0===e||e.appendChild(r);var a=r.getBoundingClientRect().width;return null===(t=B.current)||void 0===t||t.removeChild(r),a})),e=Math.max.apply(Math,n);F(e)}}),[z,w,Z]),a((function(){requestAnimationFrame((function(){j(u)}))}),[u]),a((function(){T&&(L.current=O.current,O.current=p,setTimeout((function(){return D(p)}),M?0:1e3*f*1.3/_.length+1e3*v))}),[T,p,f,v,_.length,M]),a((function(){X(M?_:m(_))}),[p,_,M]);var K=function(){return V.map((function(e,t){return n.createElement("span",{key:t,className:x,"aria-hidden":"true"},e)}))};return n.createElement("span",{className:s(g,i),style:{display:"inline-block",width:Z&&w?R:void 0,height:Z?H:void 0}},n.createElement("span",{ref:o,className:b,style:c({transition:"none",transform:E?"translateY(-".concat(U,"px)"):"translateY(0px)"},T&&l&&{transform:E?"translateY(0px)":"translateY(-".concat(U,"px)"),transition:"transform ".concat(f,"s ").concat(v,"s ease-in-out")})},Z?n.createElement(n.Fragment,null,n.createElement("span",{className:x,"aria-hidden":"true",style:{height:H}},M&&(E?q:L.current),!M&&(E?q:null!=y?y:q)),K(),n.createElement("span",{className:s(x,A),ref:B},M&&(E?L.current:q),!M&&E&&null!=y?y:q),C?K():null):n.createElement("span",{className:x,"aria-hidden":"true"},y||q)))}));var A=[",","."," "];var E=e(i((function(e,i){var c,m,g,b,x,N,E,M,w=e.value,S=e.startValue,T=e.startValueOnce,j=void 0!==T&&T,k=e.duration,q=void 0===k?.7:k,D=e.dummyCharacters,L=e.dummyCharacterCount,O=void 0===L?6:L,B=e.autoAnimationStart,W=void 0===B||B,V=e.containerClassName,X=e.charClassName,Y=e.separatorClassName,H=e.animateUnchanged,I=void 0!==H&&H,P=e.hasInfiniteList,R=void 0!==P&&P,F=e.valueClassName,G=e.sequentialAnimationMode,Z=void 0!==G&&G,J=e.useMonospaceWidth,U=void 0!==J&&J,z=e.direction,K=e.debounceDelay,Q=function(n,e){var r=t(n),i=r[0],o=r[1];return a((function(){if(0===e)return o(n);var t=setTimeout((function(){o(n)}),e);return function(){clearTimeout(t)}}),[n,e]),i}(w,null!=K?K:0),$=o((function(){return function(n){return Array.isArray(n)&&p(n[0])}(Q)?"":JSON.stringify(Q)}),[Q]),nn=t(!1),en=nn[0],tn=nn[1],rn=r(),an=r(null),on=r(Q),un=r(),ln=r(0),cn=r(0),sn=t([]),dn=sn[0],fn=sn[1],mn=r(),vn=null!==(m=null===(c=rn.current)||void 0===c?void 0:c.dummyCharacterCount)&&void 0!==m?m:O,hn=null!==(b=null===(g=rn.current)||void 0===g?void 0:g.duration)&&void 0!==b?b:q;a((function(){fn(d(0,vn-1).map((function(n){if(!D)return f(0,10);var e=n>=D.length?f(0,D.length):n;return D[e]})))}),[D,vn]),o((function(){on.current!==Q&&(un.current=on.current,on.current=Q)}),[Q]);var pn=Array.isArray(un.current)?un.current:null!==(N=null===(x=un.current)||void 0===x?void 0:x.toString().split(""))&&void 0!==N?N:[],yn=Array.isArray(on.current)?on.current:null!==(M=null===(E=on.current)||void 0===E?void 0:E.toString().split(""))&&void 0!==M?M:[],gn=o((function(){return Array.isArray(Q)?Q:Q.toString().split("")}),[Q]),_n=o((function(){return Array.isArray(S)?S:null==S?void 0:S.toString().split("")}),[S]),bn=pn.length!==yn.length,xn=[];yn.forEach((function(n,e){var t=yn.length-e-1;(yn[t]!==pn[t]||bn||I)&&xn.push(t)})),xn.reverse();var Nn=o((function(){return Math.min(.1,hn/gn.length)}),[hn,gn.length]),Cn=u((function(){mn.current&&clearTimeout(mn.current),tn(!1),ln.current=cn.current,ln.current+=1,mn.current=setTimeout((function(){cn.current+=1,tn(!0)}),20)}),[]),An=u((function(n){un.current=void 0,rn.current=n,Cn()}),[Cn]),En=u((function(n){var e=un.current;if(null==e||!h(e)||!h(Q))return[];var t=Number(v(e)),r=Number(v(Q)),a=Math.pow(10,n-1),i=t<r?d(Math.floor(t/a)+1,Math.floor(r/a)):d(Math.floor(r/a)+1,Math.floor(t/a));return Array.from(new Set(i.map((function(n){return n.toString()[n.toString().length-1]})))).filter(Boolean)}),[Q]);return a((function(){null!=un.current&&Cn()}),[$,Cn,W]),a((function(){W&&Cn()}),[W,Cn]),l(i,(function(){return{startAnimation:An}})),n.createElement("span",{className:s(V,y)},gn.map((function(e,t){var r,a,i=xn.includes(t),o=(i?xn.indexOf(t):0)*Nn,u=un.current,l=j&&ln.current>1,c=null!=Q&&null!=u&&h(Q)&&h(u)&&v(Q)<v(u);return(null===(r=rn.current)||void 0===r?void 0:r.direction)&&(c="top-down"===(null===(a=rn.current)||void 0===a?void 0:a.direction)),z&&(c="top-down"===z),!p(e)&&A.includes(e)?n.createElement("span",{key:yn.length-t-1,className:s(_,Y)},e):n.createElement(C,{key:yn.length-t-1,numbersRef:an,active:en,isChanged:i,charClassName:X,effectiveDuration:hn,delay:o,value:e,startValue:l||null==_n?void 0:_n[t],dummyList:Z?En(gn.length-t):dn,hasInfiniteList:R,valueClassName:F,reverse:c,sequentialAnimationMode:Z,useMonospaceWidth:U})})))})));export{E as default};
+import n,{memo as e,useState as t,useRef as r,useEffect as a,forwardRef as i,useMemo as o,useCallback as u,useImperativeHandle as l}from"react";var c=function(){return c=Object.assign||function(n){for(var e,t=1,r=arguments.length;t<r;t++)for(var a in e=arguments[t])Object.prototype.hasOwnProperty.call(e,a)&&(n[a]=e[a]);return n},c.apply(this,arguments)};var s=function(){for(var n=[],e=0;e<arguments.length;e++)n[e]=arguments[e];return n.filter(Boolean).join(" ")},d=function(n,e){for(var t=[],r=n;r<e;r+=1)t.push(r);return t},f=function(n,e){var t=Math.random()*(e-n);return Math.floor(t+n)},m=function(n){for(var e,t=function(n,e,t){if(t||2===arguments.length)for(var r,a=0,i=e.length;a<i;a++)!r&&a in e||(r||(r=Array.prototype.slice.call(e,0,a)),r[a]=e[a]);return n.concat(r||Array.prototype.slice.call(e))}([],n,!0),r=t.length-1;r>0;r-=1){var a=Math.floor(Math.random()*(r+1));e=[t[a],t[r]],t[r]=e[0],t[a]=e[1]}return t},v=function(n){return"number"==typeof n?n:(Array.isArray(n)?n.join(""):n).replace(/[,.]/g,"")},h=function(n){return"object"!=typeof n&&!Number.isNaN(v(n))},p=function(n){return"object"==typeof n};var y="index-module_slot_wrap__ZT-DX",g="index-module_slot__DpPgW",_="index-module_separator__7GhtE",b="index-module_numbers__sqlqm",x="index-module_num__j6XH3";!function(n,e){void 0===e&&(e={});var t=e.insertAt;if(n&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===t&&r.firstChild?r.insertBefore(a,r.firstChild):r.appendChild(a),a.styleSheet?a.styleSheet.cssText=n:a.appendChild(document.createTextNode(n))}}(".index-module_slot_wrap__ZT-DX {\n  display: inline-block;\n  white-space: nowrap;\n}\n\n.index-module_slot__DpPgW {\n  display: inline-block;\n  overflow: hidden;\n  text-align: center;\n  vertical-align: bottom;\n  will-change: transform;\n}\n\n.index-module_separator__7GhtE {\n  display: inline-block;\n  vertical-align: bottom;\n  text-align: center;\n}\n\n.index-module_numbers__sqlqm {\n  display: block;\n}\n\n.index-module_num__j6XH3 {\n  display: block;\n}");var N="undefined"!=typeof window?n.useLayoutEffect:n.useEffect;var C=e((function(e){var i=e.charClassName,o=e.numbersRef,u=e.active,l=e.isChanged,f=e.effectiveDuration,v=e.delay,p=e.value,y=e.startValue,_=e.dummyList,C=e.hasInfiniteList,A=e.valueClassName,E=e.reverse,M=e.sequentialAnimationMode,w=e.useMonospaceWidth,S=t(!1),k=S[0],T=S[1],j=t(p),q=j[0],D=j[1],L=r(),O=r(p),B=r(null),W=t(M?_:m(_)),V=W[0],X=W[1],Y=t(0),H=Y[0],I=Y[1],P=t(0),R=P[0],F=P[1],G=t(!1),Z=G[0],J=G[1],U=H*(_.length+1),z="object"!=typeof p&&h(p);N((function(){J(!0)}),[]),N((function(){var n,e;I(null!==(e=null===(n=B.current)||void 0===n?void 0:n.offsetHeight)&&void 0!==e?e:0)}),[Z]),N((function(){if(z&&w){var n=d(0,10).map((function(n){var e,t,r=document.createElement("div");r.style.position="absolute",r.style.top="0",r.style.left="-9999px",r.style.visibility="hidden",r.textContent=n.toString(),null===(e=B.current)||void 0===e||e.appendChild(r);var a=r.getBoundingClientRect().width;return null===(t=B.current)||void 0===t||t.removeChild(r),a})),e=Math.max.apply(Math,n);F(e)}}),[z,w,Z]),a((function(){requestAnimationFrame((function(){T(u)}))}),[u]),a((function(){k&&(L.current=O.current,O.current=p,setTimeout((function(){return D(p)}),M?0:1e3*f*1.3/_.length+1e3*v))}),[k,p,f,v,_.length,M]),a((function(){X(M?_:m(_))}),[p,_,M]);var K=function(){return V.map((function(e,t){return n.createElement("span",{key:t,className:x,"aria-hidden":"true"},e)}))};return n.createElement("span",{className:s(g,i),style:{display:"inline-block",width:Z&&w?R:void 0,height:Z?H:void 0}},n.createElement("span",{ref:o,className:b,style:c({transition:"none",transform:E?"translateY(-".concat(U,"px)"):"translateY(0px)"},k&&l&&{transform:E?"translateY(0px)":"translateY(-".concat(U,"px)"),transition:"transform ".concat(f,"s ").concat(v,"s ease-in-out")})},Z?n.createElement(n.Fragment,null,n.createElement("span",{className:x,"aria-hidden":"true",style:{height:H}},M&&(E?q:L.current),!M&&(E?q:null!=y?y:q)),K(),n.createElement("span",{className:s(x,A),ref:B},M&&(E?L.current:q),!M&&E&&null!=y?y:q),C?K():null):n.createElement("span",{className:x,"aria-hidden":"true"},y||q)))}));var A=[",","."," "];var E=e(i((function(e,i){var c,m,g,b,x,N,E,M,w=e.value,S=e.startValue,k=e.startValueOnce,T=void 0!==k&&k,j=e.duration,q=void 0===j?.7:j,D=e.dummyCharacters,L=e.dummyCharacterCount,O=void 0===L?6:L,B=e.autoAnimationStart,W=void 0===B||B,V=e.containerClassName,X=e.charClassName,Y=e.separatorClassName,H=e.animateUnchanged,I=void 0!==H&&H,P=e.hasInfiniteList,R=void 0!==P&&P,F=e.valueClassName,G=e.sequentialAnimationMode,Z=void 0!==G&&G,J=e.useMonospaceWidth,U=void 0!==J&&J,z=e.direction,K=e.debounceDelay,Q=function(n,e){var r=t(n),i=r[0],o=r[1];return a((function(){if(0===e)return o(n);var t=setTimeout((function(){o(n)}),e);return function(){clearTimeout(t)}}),[n,e]),i}(w,null!=K?K:0),$=o((function(){return function(n){return Array.isArray(n)&&p(n[0])}(Q)?"":JSON.stringify(Q)}),[Q]),nn=t(!1),en=nn[0],tn=nn[1],rn=r(),an=r(null),on=r(Q),un=r(),ln=r(0),cn=r(0),sn=t([]),dn=sn[0],fn=sn[1],mn=r(),vn=t(0),hn=vn[0],pn=vn[1],yn=null!==(m=null===(c=rn.current)||void 0===c?void 0:c.dummyCharacterCount)&&void 0!==m?m:O,gn=null!==(b=null===(g=rn.current)||void 0===g?void 0:g.duration)&&void 0!==b?b:q;a((function(){fn(d(0,yn-1).map((function(n){if(!D)return f(0,10);var e=n>=D.length?f(0,D.length):n;return D[e]})))}),[D,yn]),o((function(){on.current!==Q&&(un.current=on.current,on.current=Q)}),[Q]);var _n=Array.isArray(un.current)?un.current:null!==(N=null===(x=un.current)||void 0===x?void 0:x.toString().split(""))&&void 0!==N?N:[],bn=Array.isArray(on.current)?on.current:null!==(M=null===(E=on.current)||void 0===E?void 0:E.toString().split(""))&&void 0!==M?M:[],xn=o((function(){return Array.isArray(Q)?Q:null==Q?void 0:Q.toString().split("")}),[Q]),Nn=o((function(){return Array.isArray(S)?S:null==S?void 0:S.toString().split("")}),[S]),Cn=_n.length!==bn.length,An=[];bn.forEach((function(n,e){var t=bn.length-e-1;(bn[t]!==_n[t]||Cn||I)&&An.push(t)})),An.reverse();var En=o((function(){return Math.min(.1,gn/xn.length)}),[gn,xn.length]),Mn=u((function(){mn.current&&clearTimeout(mn.current),tn(!1),ln.current=cn.current,ln.current+=1,mn.current=setTimeout((function(){cn.current+=1,tn(!0)}),20)}),[]),wn=u((function(n){un.current=void 0,rn.current=n,Mn()}),[Mn]),Sn=u((function(n){var e=un.current;if(null==e||!h(e)||!h(Q))return[];var t=Number(v(e)),r=Number(v(Q)),a=Math.pow(10,n-1),i=t<r?d(Math.floor(t/a)+1,Math.floor(r/a)):d(Math.floor(r/a)+1,Math.floor(t/a));return Array.from(new Set(i.map((function(n){return n.toString()[n.toString().length-1]})))).filter(Boolean)}),[Q]),kn=u((function(){pn((function(n){return n+1}))}),[]);return a((function(){null!=un.current&&Mn()}),[$,Mn,W]),a((function(){W&&Mn()}),[W,Mn]),l(i,(function(){return{startAnimation:wn,refreshStyles:kn}})),n.createElement("span",{key:hn,className:s(V,y)},xn.map((function(e,t){var r,a,i=An.includes(t),o=(i?An.indexOf(t):0)*En,u=un.current,l=T&&ln.current>1,c=null!=Q&&null!=u&&h(Q)&&h(u)&&v(Q)<v(u);return(null===(r=rn.current)||void 0===r?void 0:r.direction)&&(c="top-down"===(null===(a=rn.current)||void 0===a?void 0:a.direction)),z&&(c="top-down"===z),!p(e)&&A.includes(e)?n.createElement("span",{key:bn.length-t-1,className:s(_,Y)},e):n.createElement(C,{key:bn.length-t-1,numbersRef:an,active:en,isChanged:i,charClassName:X,effectiveDuration:gn,delay:o,value:e,startValue:l||null==Nn?void 0:Nn[t],dummyList:Z?Sn(xn.length-t):dn,hasInfiniteList:R,valueClassName:F,reverse:c,sequentialAnimationMode:Z,useMonospaceWidth:U})})))})));export{E as default};
 //# sourceMappingURL=index.esm.js.map

lib/index.js

 'use client';
-"use strict";var e=require("react"),t=function(){return t=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var a in t=arguments[n])Object.prototype.hasOwnProperty.call(t,a)&&(e[a]=t[a]);return e},t.apply(this,arguments)};var n=function(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];return e.filter(Boolean).join(" ")},r=function(e,t){for(var n=[],r=e;r<t;r+=1)n.push(r);return n},a=function(e,t){var n=Math.random()*(t-e);return Math.floor(n+e)},u=function(e){for(var t,n=function(e,t,n){if(n||2===arguments.length)for(var r,a=0,u=t.length;a<u;a++)!r&&a in t||(r||(r=Array.prototype.slice.call(t,0,a)),r[a]=t[a]);return e.concat(r||Array.prototype.slice.call(t))}([],e,!0),r=n.length-1;r>0;r-=1){var a=Math.floor(Math.random()*(r+1));t=[n[a],n[r]],n[r]=t[0],n[a]=t[1]}return n},i=function(e){return"number"==typeof e?e:(Array.isArray(e)?e.join(""):e).replace(/[,.]/g,"")},o=function(e){return"object"!=typeof e&&!Number.isNaN(i(e))},l=function(e){return"object"==typeof e};var s="index-module_slot_wrap__ZT-DX",c="index-module_slot__DpPgW",d="index-module_separator__7GhtE",f="index-module_numbers__sqlqm",m="index-module_num__j6XH3";!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===n&&r.firstChild?r.insertBefore(a,r.firstChild):r.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}(".index-module_slot_wrap__ZT-DX {\n  display: inline-block;\n  white-space: nowrap;\n}\n\n.index-module_slot__DpPgW {\n  display: inline-block;\n  overflow: hidden;\n  text-align: center;\n  vertical-align: bottom;\n  will-change: transform;\n}\n\n.index-module_separator__7GhtE {\n  display: inline-block;\n  vertical-align: bottom;\n  text-align: center;\n}\n\n.index-module_numbers__sqlqm {\n  display: block;\n}\n\n.index-module_num__j6XH3 {\n  display: block;\n}");var v="undefined"!=typeof window?e.useLayoutEffect:e.useEffect;var h=e.memo((function(a){var i=a.charClassName,l=a.numbersRef,s=a.active,d=a.isChanged,h=a.effectiveDuration,p=a.delay,y=a.value,g=a.startValue,_=a.dummyList,b=a.hasInfiniteList,C=a.valueClassName,E=a.reverse,x=a.sequentialAnimationMode,N=a.useMonospaceWidth,M=e.useState(!1),A=M[0],S=M[1],w=e.useState(y),R=w[0],k=w[1],T=e.useRef(),j=e.useRef(y),q=e.useRef(null),D=e.useState(x?_:u(_)),L=D[0],O=D[1],B=e.useState(0),W=B[0],H=B[1],I=e.useState(0),V=I[0],X=I[1],Y=e.useState(!1),P=Y[0],F=Y[1],G=W*(_.length+1),Z="object"!=typeof y&&o(y);v((function(){F(!0)}),[]),v((function(){var e,t;H(null!==(t=null===(e=q.current)||void 0===e?void 0:e.offsetHeight)&&void 0!==t?t:0)}),[P]),v((function(){if(Z&&N){var e=r(0,10).map((function(e){var t,n,r=document.createElement("div");r.style.position="absolute",r.style.top="0",r.style.left="-9999px",r.style.visibility="hidden",r.textContent=e.toString(),null===(t=q.current)||void 0===t||t.appendChild(r);var a=r.getBoundingClientRect().width;return null===(n=q.current)||void 0===n||n.removeChild(r),a})),t=Math.max.apply(Math,e);X(t)}}),[Z,N,P]),e.useEffect((function(){requestAnimationFrame((function(){S(s)}))}),[s]),e.useEffect((function(){A&&(T.current=j.current,j.current=y,setTimeout((function(){return k(y)}),x?0:1e3*h*1.3/_.length+1e3*p))}),[A,y,h,p,_.length,x]),e.useEffect((function(){O(x?_:u(_))}),[y,_,x]);var J=function(){return L.map((function(t,n){return e.createElement("span",{key:n,className:m,"aria-hidden":"true"},t)}))};return e.createElement("span",{className:n(c,i),style:{display:"inline-block",width:P&&N?V:void 0,height:P?W:void 0}},e.createElement("span",{ref:l,className:f,style:t({transition:"none",transform:E?"translateY(-".concat(G,"px)"):"translateY(0px)"},A&&d&&{transform:E?"translateY(0px)":"translateY(-".concat(G,"px)"),transition:"transform ".concat(h,"s ").concat(p,"s ease-in-out")})},P?e.createElement(e.Fragment,null,e.createElement("span",{className:m,"aria-hidden":"true",style:{height:W}},x&&(E?R:T.current),!x&&(E?R:null!=g?g:R)),J(),e.createElement("span",{className:n(m,C),ref:q},x&&(E?T.current:R),!x&&E&&null!=g?g:R),b?J():null):e.createElement("span",{className:m,"aria-hidden":"true"},g||R)))}));var p=[",","."," "];var y=e.memo(e.forwardRef((function(t,u){var c,f,m,v,y,g,_,b,C=t.value,E=t.startValue,x=t.startValueOnce,N=void 0!==x&&x,M=t.duration,A=void 0===M?.7:M,S=t.dummyCharacters,w=t.dummyCharacterCount,R=void 0===w?6:w,k=t.autoAnimationStart,T=void 0===k||k,j=t.containerClassName,q=t.charClassName,D=t.separatorClassName,L=t.animateUnchanged,O=void 0!==L&&L,B=t.hasInfiniteList,W=void 0!==B&&B,H=t.valueClassName,I=t.sequentialAnimationMode,V=void 0!==I&&I,X=t.useMonospaceWidth,Y=void 0!==X&&X,P=t.direction,F=t.debounceDelay,G=function(t,n){var r=e.useState(t),a=r[0],u=r[1];return e.useEffect((function(){if(0===n)return u(t);var e=setTimeout((function(){u(t)}),n);return function(){clearTimeout(e)}}),[t,n]),a}(C,null!=F?F:0),Z=e.useMemo((function(){return function(e){return Array.isArray(e)&&l(e[0])}(G)?"":JSON.stringify(G)}),[G]),J=e.useState(!1),U=J[0],z=J[1],K=e.useRef(),Q=e.useRef(null),$=e.useRef(G),ee=e.useRef(),te=e.useRef(0),ne=e.useRef(0),re=e.useState([]),ae=re[0],ue=re[1],ie=e.useRef(),oe=null!==(f=null===(c=K.current)||void 0===c?void 0:c.dummyCharacterCount)&&void 0!==f?f:R,le=null!==(v=null===(m=K.current)||void 0===m?void 0:m.duration)&&void 0!==v?v:A;e.useEffect((function(){ue(r(0,oe-1).map((function(e){if(!S)return a(0,10);var t=e>=S.length?a(0,S.length):e;return S[t]})))}),[S,oe]),e.useMemo((function(){$.current!==G&&(ee.current=$.current,$.current=G)}),[G]);var se=Array.isArray(ee.current)?ee.current:null!==(g=null===(y=ee.current)||void 0===y?void 0:y.toString().split(""))&&void 0!==g?g:[],ce=Array.isArray($.current)?$.current:null!==(b=null===(_=$.current)||void 0===_?void 0:_.toString().split(""))&&void 0!==b?b:[],de=e.useMemo((function(){return Array.isArray(G)?G:G.toString().split("")}),[G]),fe=e.useMemo((function(){return Array.isArray(E)?E:null==E?void 0:E.toString().split("")}),[E]),me=se.length!==ce.length,ve=[];ce.forEach((function(e,t){var n=ce.length-t-1;(ce[n]!==se[n]||me||O)&&ve.push(n)})),ve.reverse();var he=e.useMemo((function(){return Math.min(.1,le/de.length)}),[le,de.length]),pe=e.useCallback((function(){ie.current&&clearTimeout(ie.current),z(!1),te.current=ne.current,te.current+=1,ie.current=setTimeout((function(){ne.current+=1,z(!0)}),20)}),[]),ye=e.useCallback((function(e){ee.current=void 0,K.current=e,pe()}),[pe]),ge=e.useCallback((function(e){var t=ee.current;if(null==t||!o(t)||!o(G))return[];var n=Number(i(t)),a=Number(i(G)),u=Math.pow(10,e-1),l=n<a?r(Math.floor(n/u)+1,Math.floor(a/u)):r(Math.floor(a/u)+1,Math.floor(n/u));return Array.from(new Set(l.map((function(e){return e.toString()[e.toString().length-1]})))).filter(Boolean)}),[G]);return e.useEffect((function(){null!=ee.current&&pe()}),[Z,pe,T]),e.useEffect((function(){T&&pe()}),[T,pe]),e.useImperativeHandle(u,(function(){return{startAnimation:ye}})),e.createElement("span",{className:n(j,s)},de.map((function(t,r){var a,u,s=ve.includes(r),c=(s?ve.indexOf(r):0)*he,f=ee.current,m=N&&te.current>1,v=null!=G&&null!=f&&o(G)&&o(f)&&i(G)<i(f);return(null===(a=K.current)||void 0===a?void 0:a.direction)&&(v="top-down"===(null===(u=K.current)||void 0===u?void 0:u.direction)),P&&(v="top-down"===P),!l(t)&&p.includes(t)?e.createElement("span",{key:ce.length-r-1,className:n(d,D)},t):e.createElement(h,{key:ce.length-r-1,numbersRef:Q,active:U,isChanged:s,charClassName:q,effectiveDuration:le,delay:c,value:t,startValue:m||null==fe?void 0:fe[r],dummyList:V?ge(de.length-r):ae,hasInfiniteList:W,valueClassName:H,reverse:v,sequentialAnimationMode:V,useMonospaceWidth:Y})})))})));module.exports=y;
+"use strict";var e=require("react"),t=function(){return t=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var a in t=arguments[n])Object.prototype.hasOwnProperty.call(t,a)&&(e[a]=t[a]);return e},t.apply(this,arguments)};var n=function(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];return e.filter(Boolean).join(" ")},r=function(e,t){for(var n=[],r=e;r<t;r+=1)n.push(r);return n},a=function(e,t){var n=Math.random()*(t-e);return Math.floor(n+e)},u=function(e){for(var t,n=function(e,t,n){if(n||2===arguments.length)for(var r,a=0,u=t.length;a<u;a++)!r&&a in t||(r||(r=Array.prototype.slice.call(t,0,a)),r[a]=t[a]);return e.concat(r||Array.prototype.slice.call(t))}([],e,!0),r=n.length-1;r>0;r-=1){var a=Math.floor(Math.random()*(r+1));t=[n[a],n[r]],n[r]=t[0],n[a]=t[1]}return n},i=function(e){return"number"==typeof e?e:(Array.isArray(e)?e.join(""):e).replace(/[,.]/g,"")},o=function(e){return"object"!=typeof e&&!Number.isNaN(i(e))},l=function(e){return"object"==typeof e};var s="index-module_slot_wrap__ZT-DX",c="index-module_slot__DpPgW",f="index-module_separator__7GhtE",d="index-module_numbers__sqlqm",m="index-module_num__j6XH3";!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===n&&r.firstChild?r.insertBefore(a,r.firstChild):r.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}(".index-module_slot_wrap__ZT-DX {\n  display: inline-block;\n  white-space: nowrap;\n}\n\n.index-module_slot__DpPgW {\n  display: inline-block;\n  overflow: hidden;\n  text-align: center;\n  vertical-align: bottom;\n  will-change: transform;\n}\n\n.index-module_separator__7GhtE {\n  display: inline-block;\n  vertical-align: bottom;\n  text-align: center;\n}\n\n.index-module_numbers__sqlqm {\n  display: block;\n}\n\n.index-module_num__j6XH3 {\n  display: block;\n}");var v="undefined"!=typeof window?e.useLayoutEffect:e.useEffect;var h=e.memo((function(a){var i=a.charClassName,l=a.numbersRef,s=a.active,f=a.isChanged,h=a.effectiveDuration,p=a.delay,y=a.value,g=a.startValue,_=a.dummyList,b=a.hasInfiniteList,C=a.valueClassName,E=a.reverse,x=a.sequentialAnimationMode,N=a.useMonospaceWidth,M=e.useState(!1),S=M[0],A=M[1],w=e.useState(y),k=w[0],R=w[1],T=e.useRef(),j=e.useRef(y),q=e.useRef(null),D=e.useState(x?_:u(_)),L=D[0],O=D[1],B=e.useState(0),W=B[0],H=B[1],I=e.useState(0),V=I[0],X=I[1],Y=e.useState(!1),P=Y[0],F=Y[1],G=W*(_.length+1),Z="object"!=typeof y&&o(y);v((function(){F(!0)}),[]),v((function(){var e,t;H(null!==(t=null===(e=q.current)||void 0===e?void 0:e.offsetHeight)&&void 0!==t?t:0)}),[P]),v((function(){if(Z&&N){var e=r(0,10).map((function(e){var t,n,r=document.createElement("div");r.style.position="absolute",r.style.top="0",r.style.left="-9999px",r.style.visibility="hidden",r.textContent=e.toString(),null===(t=q.current)||void 0===t||t.appendChild(r);var a=r.getBoundingClientRect().width;return null===(n=q.current)||void 0===n||n.removeChild(r),a})),t=Math.max.apply(Math,e);X(t)}}),[Z,N,P]),e.useEffect((function(){requestAnimationFrame((function(){A(s)}))}),[s]),e.useEffect((function(){S&&(T.current=j.current,j.current=y,setTimeout((function(){return R(y)}),x?0:1e3*h*1.3/_.length+1e3*p))}),[S,y,h,p,_.length,x]),e.useEffect((function(){O(x?_:u(_))}),[y,_,x]);var J=function(){return L.map((function(t,n){return e.createElement("span",{key:n,className:m,"aria-hidden":"true"},t)}))};return e.createElement("span",{className:n(c,i),style:{display:"inline-block",width:P&&N?V:void 0,height:P?W:void 0}},e.createElement("span",{ref:l,className:d,style:t({transition:"none",transform:E?"translateY(-".concat(G,"px)"):"translateY(0px)"},S&&f&&{transform:E?"translateY(0px)":"translateY(-".concat(G,"px)"),transition:"transform ".concat(h,"s ").concat(p,"s ease-in-out")})},P?e.createElement(e.Fragment,null,e.createElement("span",{className:m,"aria-hidden":"true",style:{height:W}},x&&(E?k:T.current),!x&&(E?k:null!=g?g:k)),J(),e.createElement("span",{className:n(m,C),ref:q},x&&(E?T.current:k),!x&&E&&null!=g?g:k),b?J():null):e.createElement("span",{className:m,"aria-hidden":"true"},g||k)))}));var p=[",","."," "];var y=e.memo(e.forwardRef((function(t,u){var c,d,m,v,y,g,_,b,C=t.value,E=t.startValue,x=t.startValueOnce,N=void 0!==x&&x,M=t.duration,S=void 0===M?.7:M,A=t.dummyCharacters,w=t.dummyCharacterCount,k=void 0===w?6:w,R=t.autoAnimationStart,T=void 0===R||R,j=t.containerClassName,q=t.charClassName,D=t.separatorClassName,L=t.animateUnchanged,O=void 0!==L&&L,B=t.hasInfiniteList,W=void 0!==B&&B,H=t.valueClassName,I=t.sequentialAnimationMode,V=void 0!==I&&I,X=t.useMonospaceWidth,Y=void 0!==X&&X,P=t.direction,F=t.debounceDelay,G=function(t,n){var r=e.useState(t),a=r[0],u=r[1];return e.useEffect((function(){if(0===n)return u(t);var e=setTimeout((function(){u(t)}),n);return function(){clearTimeout(e)}}),[t,n]),a}(C,null!=F?F:0),Z=e.useMemo((function(){return function(e){return Array.isArray(e)&&l(e[0])}(G)?"":JSON.stringify(G)}),[G]),J=e.useState(!1),U=J[0],z=J[1],K=e.useRef(),Q=e.useRef(null),$=e.useRef(G),ee=e.useRef(),te=e.useRef(0),ne=e.useRef(0),re=e.useState([]),ae=re[0],ue=re[1],ie=e.useRef(),oe=e.useState(0),le=oe[0],se=oe[1],ce=null!==(d=null===(c=K.current)||void 0===c?void 0:c.dummyCharacterCount)&&void 0!==d?d:k,fe=null!==(v=null===(m=K.current)||void 0===m?void 0:m.duration)&&void 0!==v?v:S;e.useEffect((function(){ue(r(0,ce-1).map((function(e){if(!A)return a(0,10);var t=e>=A.length?a(0,A.length):e;return A[t]})))}),[A,ce]),e.useMemo((function(){$.current!==G&&(ee.current=$.current,$.current=G)}),[G]);var de=Array.isArray(ee.current)?ee.current:null!==(g=null===(y=ee.current)||void 0===y?void 0:y.toString().split(""))&&void 0!==g?g:[],me=Array.isArray($.current)?$.current:null!==(b=null===(_=$.current)||void 0===_?void 0:_.toString().split(""))&&void 0!==b?b:[],ve=e.useMemo((function(){return Array.isArray(G)?G:null==G?void 0:G.toString().split("")}),[G]),he=e.useMemo((function(){return Array.isArray(E)?E:null==E?void 0:E.toString().split("")}),[E]),pe=de.length!==me.length,ye=[];me.forEach((function(e,t){var n=me.length-t-1;(me[n]!==de[n]||pe||O)&&ye.push(n)})),ye.reverse();var ge=e.useMemo((function(){return Math.min(.1,fe/ve.length)}),[fe,ve.length]),_e=e.useCallback((function(){ie.current&&clearTimeout(ie.current),z(!1),te.current=ne.current,te.current+=1,ie.current=setTimeout((function(){ne.current+=1,z(!0)}),20)}),[]),be=e.useCallback((function(e){ee.current=void 0,K.current=e,_e()}),[_e]),Ce=e.useCallback((function(e){var t=ee.current;if(null==t||!o(t)||!o(G))return[];var n=Number(i(t)),a=Number(i(G)),u=Math.pow(10,e-1),l=n<a?r(Math.floor(n/u)+1,Math.floor(a/u)):r(Math.floor(a/u)+1,Math.floor(n/u));return Array.from(new Set(l.map((function(e){return e.toString()[e.toString().length-1]})))).filter(Boolean)}),[G]),Ee=e.useCallback((function(){se((function(e){return e+1}))}),[]);return e.useEffect((function(){null!=ee.current&&_e()}),[Z,_e,T]),e.useEffect((function(){T&&_e()}),[T,_e]),e.useImperativeHandle(u,(function(){return{startAnimation:be,refreshStyles:Ee}})),e.createElement("span",{key:le,className:n(j,s)},ve.map((function(t,r){var a,u,s=ye.includes(r),c=(s?ye.indexOf(r):0)*ge,d=ee.current,m=N&&te.current>1,v=null!=G&&null!=d&&o(G)&&o(d)&&i(G)<i(d);return(null===(a=K.current)||void 0===a?void 0:a.direction)&&(v="top-down"===(null===(u=K.current)||void 0===u?void 0:u.direction)),P&&(v="top-down"===P),!l(t)&&p.includes(t)?e.createElement("span",{key:me.length-r-1,className:n(f,D)},t):e.createElement(h,{key:me.length-r-1,numbersRef:Q,active:U,isChanged:s,charClassName:q,effectiveDuration:fe,delay:c,value:t,startValue:m||null==he?void 0:he[r],dummyList:V?Ce(ve.length-r):ae,hasInfiniteList:W,valueClassName:H,reverse:v,sequentialAnimationMode:V,useMonospaceWidth:Y})})))})));module.exports=y;
 //# sourceMappingURL=index.js.map

lib/types/common.d.ts

@@ -11,2 +11,3 @@ /// <reference types="react" />
     startAnimation: (options?: StartAnimationOptions) => void;
+    refreshStyles: () => void;
 }

package.json

 {
   "name": "react-slot-counter",
-  "version": "1.13.1",
+  "version": "1.14.0",
   "description": "Make Your Numbers Pop: Simple and Dynamic Counters for Your UI",
@@ -18,2 +18,3 @@ "author": "almond-bongbong",
     "dev": "npm run build:watch && cd ./example && npm run start",
+    "dev:example": "cd ./example && npm run start",
     "predeploy": "cd example && yarn install && yarn build",
@@ -20,0 +21,0 @@ "deploy": "gh-pages -d example/build"

README.md

@@ -81,2 +81,3 @@ # react-slot-counter 🎰
 | useMonospaceWidth       | `boolean`                                             | `false`                                | Ensures that all numeric characters occupy the same horizontal space, just like they would in a monospace font.                                 |
+| direction               | `string`                                              | `'bottom-top'`                         | Sets the direction of the slot machine animation. Accepted values are `'bottom-top'` and `'top-bottom'`.                                        |
 | debounceDelay           | `number`                                              | `0`                                    | Specifies the delay in milliseconds for debouncing animations. When the value changes rapidly, it allows the animation to execute smoothly.     |
@@ -88,18 +89,17 @@
 
-| Method           | Type                          | Description                                                                      |
-| ---------------- | ----------------------------- | -------------------------------------------------------------------------------- |
-| `startAnimation` | `(options?: Options) => void` | Initiates the animation of the component with optional customization parameters. |
+| Method           | Type                          | Description                                                                                                                                                                    |
+| ---------------- | ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `refreshStyles`  | `() => void`                  | Recalculates the styles for the SlotCounter component. Useful for scenarios where the font size changes or the window is resized, forcing a re-render to apply the new styles. |
+| `startAnimation` | `(options?: Options) => void` | Initiates the animation of the component with optional customization parameters.                                                                                               |
 
-### Options Object
+### Options for `startAnimation` Method
 
-The `options` object accepts the following properties for customizing the component's behavior:
+| Property              | Type     | Optional | Default        | Description                                                                                                                                      |
+| --------------------- | -------- | -------- | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `duration`            | `number` | Yes      | None           | A number representing the duration of the animation in seconds. Overrides the `duration` prop if provided.                                       |
+| `dummyCharacterCount` | `number` | Yes      | None           | A number indicating how many dummy characters should be shown before the target character. Overrides the `dummyCharacterCount` prop if provided. |
+| `direction`           | `string` | Yes      | `'bottom-top'` | Sets the direction of the slot machine animation. Accepted values: `'bottom-top'`, `'top-bottom'`. Overrides the `direction` prop if provided.   |
 
-- **`duration`**: (Optional) A number representing the duration of the animation in seconds. This will override the `duration` prop if provided.
-- **`dummyCharacterCount`**: (Optional) A number indicating how many dummy characters should be shown in the animation before the target character is displayed. This will override the `dummyCharacterCount` prop if provided.
-- **`direction`**: (Optional) A string that sets the direction of the slot machine animation. Accepted values are `'bottom-top'` and `'top-bottom'`. The default value is `'bottom-top'`.
-  - **`'bottom-top'`**: The animation will start from the bottom and move towards the top.
-  - **`'top-bottom'`**: The animation will start from the top and move downwards.
+Ref Example:
 
-Example:
-
 ```jsx
@@ -106,0 +106,0 @@ import React, { useRef } from 'react';

New alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

36141

increased by3.33%

Lines of code

136

increased by2.26%

No dependency changes