react dynamic font

reaccionando

Este es un componente React que hizo que su texto no se envuelva y ajuste dinámicamente el tamaño de la fuente

A veces queremos que algún texto tenga un ancho fijo, y reducirá automáticamente el tamaño de la fuente cuando el número de caracteres es demasiado grande, de modo que el texto siempre está en una línea sin envolver. Es por eso que creé este componente.

Una simple demostración en vivo

Jugar e instalar con bit

Instalación

 npm install react-dynamic-font --save

o

 yarn add react-dynamic-font

Este paquete requiere React V16.3 o superior, si desea usar en la versión más baja de React (V15.x-V16.2.x), pruebe yarn add react-dynamic-font@^1.0.0 , para React V0.14 y abajo, intente yarn add react-dynamic-font@^0.0.6

Uso

ReactDynamicFont usa el ancho de su elemento principal como ancho fijo, y recuerde agregar el overflow: hidden a su elemento principal.

 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 desea agregar una animación suave mientras cambia el tamaño de la fuente, agregue los accesorios smooth .

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

¡Divertirse!