react dynamic font

react-dynamique

Ceci est un composant React qui a fait que votre texte ne s'enveloppe pas et n'a pas réglé dynamiquement la taille de la police

Parfois, nous voulons que du texte ait une largeur fixe, et cela réduira automatiquement la taille de la police lorsque le nombre de caractères est trop grand, de sorte que le texte est toujours en une seule ligne sans emballage. C'est pourquoi j'ai créé ce composant.

Une simple démo en direct

Jouer et installer avec un bit

Installation

 npm install react-dynamic-font --save

ou

 yarn add react-dynamic-font

Ce package nécessite React v16.3 ou supérieur, si vous souhaitez utiliser à Lower React Version (v15.x - v16.2.x), essayez yarn add react-dynamic-font@^1.0.0 , pour React v0.14 et ci-dessous, essayez yarn add react-dynamic-font@^0.0.6

Usage

ReactDynamicFont utilise la largeur de son élément parent comme largeur fixe et n'oubliez pas d'ajouter le overflow: hidden à son élément parent.

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

Si vous souhaitez ajouter une animation lisse pendant la taille de la taille de la police, ajoutez les accessoires smooth .

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

Amusez-vous!