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