react dynamic font

React-dynamic-font

これは、テキストがフォントサイズをラップして動的に調整することをせずに、Reactコンポーネントです

いくつかのテキストに固定幅を持たせたい場合があり、文字の数が大きすぎるとフォントサイズが自動的に削減されるため、テキストは常にラップせずに1行になります。これが私がこのコンポーネントを作成した理由です。

シンプルなライブデモ

ビットで再生してインストールします

インストール

 npm install react-dynamic-font --save

または

 yarn add react-dynamic-font

このパッケージには、Lower Reactバージョン（v15.x-v16.2.x）で使用する場合は、React v16.3以降が必要です。yarn yarn add react-dynamic-font@^1.0.0 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 */ } />

楽しむ！