@flyyer/use-fit-text
Version:
React hook used to fit text in a div
3 lines (2 loc) • 2.04 kB
JavaScript
var e=require("react"),n=require("dequal/lite");function t(){return(t=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e}).apply(this,arguments)}var r={debug:10,info:20,warn:30,error:40,none:100},i="undefined"!=typeof window&&window.document&&window.document.createElement?e.useLayoutEffect:e.useEffect;exports.useFitText=function(o,c){var u=void 0===o?{}:o,f=u.logLevel,a=u.maxFontSize,s=void 0===a?100:a,l=u.minFontSize,S=void 0===l?20:l,d=u.onFinish,v=u.onStart,z=u.resolution,w=void 0===z?5:z,h=r[void 0===f?"warn":f],m=e.useCallback(function(){return{calcKey:0,fontSize:s,fontSizePrev:S,fontSizeMax:s,fontSizeMin:S}},[s,S]),y=e.useRef(null),M=e.useRef(!1),x=e.useRef(),g=e.useState(m),b=g[0],p=g[1],F=e.useState(!1),K=F[0],q=F[1],E=b.calcKey,P=b.fontSize,O=b.fontSizeMax,R=b.fontSizeMin,j=b.fontSizePrev,A=null,C=e.useState(function(){return new window.ResizeObserver(function(){A=window.requestAnimationFrame(function(){M.current||(v&&v(),M.current=!0,q(!0),p(t({},m(),{calcKey:E+1})))})})})[0];e.useEffect(function(){return y.current&&C.observe(y.current),function(){A&&window.cancelAnimationFrame(A),C.disconnect()}},[A,C]);var H=x.current;return e.useEffect(function(){0===E||M.current||(n.dequal(H,c)||(v&&v(),q(!0),p(t({},m(),{calcKey:E+1}))),x.current=c)},[E,m,v,H].concat(c)),i(function(){if(0!==E){var e=Math.abs(P-j)<=w,n=!!y.current&&(y.current.scrollHeight>y.current.offsetHeight||y.current.scrollWidth>y.current.offsetWidth),t=P>j;if(e)n&&P===j?(M.current=!1,q(!1),h<=r.info&&console.info("[use-fit-text] reached `minFontSize = "+S+"` without fitting text")):n?p({fontSize:t?j:R,fontSizeMax:O,fontSizeMin:R,fontSizePrev:j,calcKey:E}):(M.current=!1,q(!1),d&&d(P));else{var i,o=O,c=R;n?(i=t?j-P:R-P,o=Math.min(O,P)):(i=t?O-P:j-P,c=Math.max(R,P)),p({calcKey:E,fontSize:P+i/2,fontSizeMax:o,fontSizeMin:c,fontSizePrev:P})}}},[E,P,O,R,j,d,y,w]),{fontSize:P+"%",ref:y,isCalculating:K}};
//# sourceMappingURL=index.js.map