react-dynamic-font/browser/react-dynamic-font.min.js

make your text does not wrap and dynamically adjust the font size

/*
 *****************************************************************************
    Copyright (c) Microsoft Corporation. All rights reserved.
    Licensed under the Apache License, Version 2.0 (the "License"); you may not use
    this file except in compliance with the License. You may obtain a copy of the
    License at http://www.apache.org/licenses/LICENSE-2.0

    THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
    KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
    WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
    MERCHANTABLITY OR NON-INFRINGEMENT.

    See the Apache Version 2.0 License for specific language governing permissions
    and limitations under the License.
*****************************************************************************/
'use strict';var ReactDynamicFont=function(e){function l(c,b){function a(){this.constructor=c}f(c,b);c.prototype=null===b?Object.create(b):(a.prototype=b.prototype,new a)}function k(c){var b=window.getComputedStyle(c);c=c.offsetWidth;var a=parseFloat(b.borderLeftWidth),g=parseFloat(b.borderRightWidth),d=parseFloat(b.paddingLeft);b=parseFloat(b.paddingRight);return c-g-a-d-b}var f=function(c,b){f=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(a,b){a.__proto__=b}||function(a,b){for(var c in b)b.hasOwnProperty(c)&&
(a[c]=b[c])};return f(c,b)},h=function(){h=Object.assign||function(c){for(var b,a=1,g=arguments.length;a<g;a++){b=arguments[a];for(var d in b)Object.prototype.hasOwnProperty.call(b,d)&&(c[d]=b[d])}return c};return h.apply(this,arguments)},m={display:"inline-block",whiteSpace:"nowrap",msTransformOrigin:"0 50%",WebkitTransformOrigin:"0 50%",OTransformOrigin:"0 50%",MozTransformOrigin:"0 50%",transformOrigin:"0 50%"},n={WebkitTransition:"-webkit-transform 400ms",OTransition:"-o-transform 400ms",MozTransition:"-moz-transform 400ms",
transition:"transform 400ms"};return function(c){function b(){var a=null!==c&&c.apply(this,arguments)||this;a.state={scale:1};a.spanRef=e.createRef();a.getMaxWidth=function(){return k(a.spanRef.current.parentElement)};a.getCurrentWidth=function(){return k(a.spanRef.current)};a.retryTimmer=null;a.timesOfRetryGetWidth=0;a.fixWidth=function(){var b=a.getMaxWidth(),c=a.getCurrentWidth();0>=c?a.setRetryTimmer():(a.timesOfRetryGetWidth=0,c>b?a.setState({scale:b/c}):a.setState({scale:1}))};return a}l(b,
c);b.prototype.componentDidMount=function(){this.props.content&&this.props.content.length&&this.fixWidth()};b.prototype.componentDidUpdate=function(a){a.content!==this.props.content&&(this.props.content||"").length&&this.fixWidth()};b.prototype.setRetryTimmer=function(){null!=this.retryTimmer&&(clearTimeout(this.retryTimmer),this.retryTimmer=null);this.timesOfRetryGetWidth<=b.maxRetryTimes&&(this.retryTimmer=window.setTimeout(this.fixWidth,b.retryDelayMillisecond))};b.prototype.render=function(){if(1===
this.state.scale)var a=void 0;else a="scale("+this.state.scale+", "+this.state.scale+")",a={msTransform:a,WebkitTransform:a,OTransform:a,MozTransform:a,transform:a};a=h({},m,null!=this.props.smooth&&this.props.smooth?n:void 0,a);return e.createElement("span",{style:a,ref:this.spanRef},this.props.content)};b.retryDelayMillisecond=300;b.maxRetryTimes=5;return b}(e.Component)}(React);