react dynamic font

react-dinâmico-font

Este é um componente de reação que fez seu texto não envolve e ajusta dinamicamente o tamanho da fonte

Às vezes, queremos que algum texto tenha uma largura fixa e reduz automaticamente o tamanho da fonte quando o número de caracteres for muito grande, para que o texto esteja sempre em uma linha sem embrulhar. É por isso que criei esse componente.

Uma demonstração ao vivo simples

Jogue e instale com bit

Instalação

 npm install react-dynamic-font --save

ou

 yarn add react-dynamic-font

Este pacote requer React v16.3 ou superior, se você quiser usar na versão mais baixa do React (v15.x-v16.2.x), tente yarn add react-dynamic-font@^1.0.0 , para react v0.14 e abaixo, tente yarn add react-dynamic-font@^0.0.6

Uso

ReactDynamicFont usa a largura de seu elemento pai como a largura fixa e lembre -se de adicionar o overflow: hidden ao seu elemento pai.

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

Se você deseja adicionar animação suave durante a alteração do tamanho da fonte, adicione os adereços smooth .

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

Divirta-se!