react dynamic font

反应性触及法

这是一个反应组件，使您的文本不会包装并动态调整字体大小

有时，我们希望一些文本具有固定宽度，并且当字符数量太大时，它会自动降低字体大小，因此文本始终在一行无需包装的情况下。这就是为什么我创建此组件的原因。

一个简单的现场演示

玩耍和安装

安装

 npm install react-dynamic-font --save

或者

 yarn add react-dynamic-font

This package require react v16.3 or higher, if you want to use at lower react version(v15.x - v16.2.x), try yarn add react-dynamic-font@^1.0.0 , for React v0.14 and below, try yarn add react-dynamic-font@^0.0.6

用法

ReactDynamicFont使用其父元素的宽度作为固定宽度，并记住添加CSS样式overflow: hidden在其父元素中。

 import React , { Component } from 'react' ;
import DynamicFont from 'react-dynamic-font' ;

class Demo extends Component {
  render ( ) {
    const style = {
      width : 400 ,
      fontSize : 30 ,
      lineHeight : 30 ,
      overflow : 'hidden' ,
    } ;
    return (
      < div style = { style } >
        < DynamicFont content = { /* Your text here */ } />
      </ div >
    ) ;
  }
}

如果要在更改字体尺寸时添加平滑的动画，请添加smooth道具。

 < DynamicFont smooth content = { /* Your text here */ } />

玩得开心！