use-fit-text/dist/index.modern.js

React hook used to fit text in a div

import{useCallback as e,useRef as n,useState as t,useEffect as r,useLayoutEffect as i}from"react";import o from"resize-observer-polyfill";const c="undefined"!=typeof window&&window.document&&window.document.createElement?i:r;export default({maxFontSize:i=100,minFontSize:f=20,onFinish:u,onStart:a,resolution:l=5}={})=>{const z=e(()=>({calcKey:0,fontSize:i,fontSizePrev:f,fontSizeMax:i,fontSizeMin:f}),[i,f]),S=n(null),s=n(),m=n(!1),[d,w]=t(z),{calcKey:M,fontSize:h,fontSizeMax:x,fontSizeMin:y,fontSizePrev:F}=d;let v=null;const[K]=t(()=>new o(()=>{v=window.requestAnimationFrame(()=>{m.current||(a&&a(),m.current=!0,w({...z(),calcKey:M+1}))})}));r(()=>(S.current&&K.observe(S.current),()=>{v&&window.cancelAnimationFrame(v),K.disconnect()}),[v,K]);const p=S.current&&S.current.innerHTML;return r(()=>{0===M||m.current||(p!==s.current&&(a&&a(),w({...z(),calcKey:M+1})),s.current=p)},[M,z,p,a]),c(()=>{if(0===M)return;const e=Math.abs(h-F)<=l,n=!!S.current&&(S.current.scrollHeight>S.current.offsetHeight||S.current.scrollWidth>S.current.offsetWidth),t=h>F;if(e)return void(n&&h===F?(m.current=!1,console.error(`Failed to fit text with \`minFontSize = ${f}\`. To fix, reduce \`minFontSize\`.`)):n?w({fontSize:t?F:y,fontSizeMax:x,fontSizeMin:y,fontSizePrev:F,calcKey:M}):(m.current=!1,u&&u(h)));let r,i=x,o=y;n?(r=t?F-h:y-h,i=Math.min(x,h)):(r=t?x-h:F-h,o=Math.max(y,h)),w({calcKey:M,fontSize:h+r/2,fontSizeMax:i,fontSizeMin:o,fontSizePrev:h})},[M,h,x,y,F,u,S,l]),{fontSize:h+"%",ref:S}};
//# sourceMappingURL=index.modern.js.map