react dynamic font

رد الفعل الديناميكي

هذا مكون رد فعل جعل النص الخاص بك لا يلف وضبط حجم الخط ديناميكيًا

في بعض الأحيان ، نريد أن يكون لبعض النص عرضًا ثابتًا ، وسيقلل تلقائيًا من حجم الخط عندما يكون عدد الأحرف كبيرًا جدًا ، بحيث يكون النص دائمًا في سطر واحد دون التفاف. هذا هو السبب في أنني أنشأت هذا المكون.

عرض مباشر بسيط

تشغيل وتثبيت مع بت

تثبيت

 npm install react-dynamic-font --save

أو

 yarn add react-dynamic-font

تتطلب هذه الحزمة React V16.3 أو أعلى ، إذا كنت تريد استخدامها في إصدار React Lower (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 */ } />

استمتع!