react dynamic font

react-dynamic-font

Ini adalah komponen bereaksi yang membuat teks Anda tidak membungkus dan secara dinamis menyesuaikan ukuran font

Kadang -kadang kami ingin beberapa teks memiliki lebar tetap, dan secara otomatis akan mengurangi ukuran font ketika jumlah karakter terlalu besar, sehingga teks selalu dalam satu baris tanpa pembungkus. Inilah sebabnya saya membuat komponen ini.

Demo live sederhana

Mainkan dan Instal dengan Bit

Instalasi

 npm install react-dynamic-font --save

atau

 yarn add react-dynamic-font

Paket ini memerlukan React v16.3 atau lebih tinggi, jika Anda ingin menggunakan pada versi React Bawah (v15.x-v16.2.x), coba yarn add react-dynamic-font@^1.0.0 , untuk reaksi v0.14 dan di bawah ini, cobalah yarn add react-dynamic-font@^0.0.6

Penggunaan

ReactDynamicFont Gunakan lebar elemen induknya sebagai lebar tetap, dan ingat untuk menambahkan gaya CSS overflow: hidden pada elemen induknya.

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

Jika Anda ingin menambahkan animasi halus saat mengubah ukuran font, tambahkan alat peraga smooth .

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

Selamat bersenang-senang!