use-fit-text/dist/index.mjs

React hook used to fit text in a div

import{useCallback as n,useEffect as e,useLayoutEffect as t,useRef as r,useState as i}from"react";import o from"resize-observer-polyfill";var c={debug:10,info:20,warn:30,error:40,none:100},f="undefined"!=typeof window&&window.document&&window.document.createElement?t:e;export default function(t){void 0===t&&(t={});var u=t.logLevel;void 0===u&&(u="info");var a=t.maxFontSize;void 0===a&&(a=100);var l=t.minFontSize;void 0===l&&(l=20);var v=t.onFinish,z=t.onStart,S=t.resolution;void 0===S&&(S=5);var d=c[u],s=n(function(){return{calcKey:0,fontSize:a,fontSizePrev:l,fontSizeMax:a,fontSizeMin:l}},[a,l]),m=r(null),w=r(),M=r(!1),h=i(s),x=h[0],y=h[1],g=x.calcKey,b=x.fontSize,F=x.fontSizeMax,K=x.fontSizeMin,p=x.fontSizePrev,P=null,H=i(function(){return new o(function(){P=window.requestAnimationFrame(function(){M.current||(z&&z(),M.current=!0,y(Object.assign({},s(),{calcKey:g+1})))})})})[0];e(function(){return m.current&&H.observe(m.current),function(){P&&window.cancelAnimationFrame(P),H.disconnect()}},[P,H]);var j=m.current&&m.current.innerHTML;return e(function(){0===g||M.current||(j!==w.current&&(z&&z(),y(Object.assign({},s(),{calcKey:g+1}))),w.current=j)},[g,s,j,z]),f(function(){if(0!==g){var n=Math.abs(b-p)<=S,e=!!m.current&&(m.current.scrollHeight>m.current.offsetHeight||m.current.scrollWidth>m.current.offsetWidth),t=b>p;if(n)e&&b===p?(M.current=!1,d<=c.info&&console.info("[use-fit-text] reached `minFontSize = "+l+"` without fitting text")):e?y({fontSize:t?p:K,fontSizeMax:F,fontSizeMin:K,fontSizePrev:p,calcKey:g}):(M.current=!1,v&&v(b));else{var r,i=F,o=K;e?(r=t?p-b:K-b,i=Math.min(F,b)):(r=t?F-b:p-b,o=Math.max(K,b)),y({calcKey:g,fontSize:b+r/2,fontSizeMax:i,fontSizeMin:o,fontSizePrev:b})}}},[g,b,F,K,p,v,m,S]),{fontSize:b+"%",ref:m}}
//# sourceMappingURL=index.mjs.map