react dynamic font

React-Dynamic-FONT

Dies ist eine React -Komponente, die dazu führte, dass Ihr Text die Schriftgröße nicht umwickelt und dynamisch eingestellt wird

Manchmal möchten wir, dass ein Text eine feste Breite hat und die Schriftgröße automatisch reduziert, wenn die Anzahl der Zeichen zu groß ist, so dass der Text immer in einer Zeile ist, ohne zu wickeln. Aus diesem Grund habe ich diese Komponente erstellt.

Eine einfache Live -Demo

Spielen und installieren mit Bit

Installation

 npm install react-dynamic-font --save

oder

 yarn add react-dynamic-font

Dieses Paket erfordert React v16.3 oder höher. Wenn Sie bei der unteren React-Version (v15.x-v16.2.x) verwenden möchten, versuchen Sie yarn add react-dynamic-font@^1.0.0 , für React v0.14 und unten, versuchen Sie es yarn add react-dynamic-font@^0.0.6

Verwendung

ReactDynamicFont Verwenden Sie die Breite seines übergeordneten Elements als feste Breite und denken Sie daran, den overflow: hidden zu seinem übergeordneten Element.

 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 >
    ) ;
  }
}

Wenn Sie reibungslose Animationen hinzufügen möchten, während die Schriftgröße geändert wird, fügen Sie die smooth Requisiten hinzu.

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

Viel Spaß!