react dynamic font

React-Dynamic-Font

Это компонент React, который сделал ваш текст, не завершается и динамически регулирует размер шрифта

Иногда мы хотим, чтобы какой -то текст имел фиксированную ширину, и он автоматически уменьшит размер шрифта, когда количество символов слишком большое, так что текст всегда находится в одной строке без упаковки. Вот почему я создал этот компонент.

Простая живая демонстрация

Играть и установить битом

Установка

 npm install react-dynamic-font --save

или

 yarn add react-dynamic-font

Этот пакет требует React v16.3 или выше, если вы хотите использовать в нижней версии React (v15.x-v16.2.x), попробуйте yarn add react-dynamic-font@^1.0.0 , для react v0.14 и ниже, попробуйте yarn add react-dynamic-font@^0.0.6

Использование

ReactDynamicFont используйте ширину своего родительского элемента в качестве фиксированной ширины, и не забудьте добавить 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 */ } />

Веселиться!