react typesetting
v0.3.1
Bereaksi komponen untuk membuat desain typeset yang indah.
Demo!
import { TightenText } from 'react-typesetting' ; Kencangkan word-spacing , letter-spacing , dan font-size (dalam urutan itu) dengan jumlah minimum yang diperlukan untuk memastikan jumlah minimal dari garis yang dibungkus dan meluap.
Algoritma dimulai dengan mengatur minimum semua nilai (ditentukan oleh minWordSpacing , minLetterSpacing , dan minFontSize Props) untuk menentukan apakah menyesuaikan ini akan menghasilkan lebih sedikit garis yang dibungkus atau lebih sedikit overflow. Jika demikian, maka pencarian biner dilakukan (dengan paling banyak maxIterations ) untuk menemukan yang paling cocok.
Secara default, ukuran elemen yang mungkin mengharuskan refitting teks terdeteksi secara otomatis. Dengan menentukan prop reflowKey , Anda dapat mengambil kontrol manual dengan mengubah prop kapan pun Anda ingin komponen memperbarui.
Perhatikan bahwa tidak seperti dengan teks yang dibenarkan, penyesuaian kesesuaian harus berlaku untuk semua baris teks, bukan hanya garis yang perlu dikencangkan, karena tidak ada cara untuk menargetkan garis yang dibungkus individu. Dengan demikian, komponen ini paling baik digunakan untuk menjalankan teks pendek yang secara tipografi, seperti judul atau label.
| Nama | Jenis | Bawaan | Keterangan | |
|---|---|---|---|---|
| ClassName | Rangkaian | Kelas untuk diterapkan pada | ||
| gaya | Obyek | Properti gaya ekstra untuk ditambahkan ke | ||
| anak-anak | Node | Konten untuk diterjemahkan. | ||
| Minwordspacing | Nomor | -0.02 | Jarak kata minimum di EMS. Atur ini ke 0 jika jarak kata tidak boleh disesuaikan. | |
| Minletterspacing | Nomor | -0.02 | Jarak huruf minimum di EMS. Atur ini ke 0 jika jarak kata tidak boleh disesuaikan. | |
| Minfontsize | Nomor | 0.97 | | |
| Maxiterations | Nomor | 5 | Saat melakukan pencarian biner untuk menemukan nilai optimal dari setiap properti CSS, ini menetapkan jumlah maksimum iterasi untuk dijalankan sebelum menyelesaikan nilai. | |
| Reflowkey | Salah satu… Nomor Rangkaian | Jika ditentukan, nonaktifkan reflow otomatis sehingga Anda dapat memicu secara manual dengan mengubah nilai ini. Prop itu sendiri tidak melakukan apa -apa, tetapi mengubahnya akan menyebabkan bereaksi memperbarui komponen. | ||
| Reflowtimeout | Nomor | Debounces reflows sehingga mereka sering terjadi dalam milidetik (pada akhir durasi yang diberikan). Jika tidak ditentukan, reflow dihitung setiap kali komponen diterjemahkan. | ||
| dengan disabilitas | Boolean | Apakah akan benar -benar menonaktifkan refitting teks. Penyesuaian kesesuaian apa pun yang telah diterapkan dalam render sebelumnya akan dilestarikan. | ||
| Onreflow | Fungsi | Fungsi untuk dihubungi ketika tata letak telah dihitung ulang dan teksnya dilakukan kembali. | ||
| preset | Rangkaian | Nama preset yang didefinisikan dalam | ||
import { PreventWidows } from 'react-typesetting' ;Mencegah janda dengan mengukur lebar baris teks terakhir yang diberikan oleh anak -anak komponen. Ruang akan dikonversi menjadi ruang yang tidak pecah sampai lebar minimum yang diberikan atau jumlah maksimum substitusi tercapai.
Secara default, ukuran elemen yang mungkin mengharuskan kembali lebar garis yang terdeteksi secara otomatis. Dengan menentukan prop reflowKey , Anda dapat mengambil kontrol manual dengan mengubah prop kapan pun Anda ingin komponen memperbarui.
| Nama | Jenis | Bawaan | Keterangan | |
|---|---|---|---|---|
| ClassName | Rangkaian | Kelas untuk diterapkan pada | ||
| gaya | Obyek | Properti gaya ekstra untuk ditambahkan ke | ||
| anak-anak | Node | Konten untuk diterjemahkan. | ||
| MaxSubstitutions | Nomor | 3 | Jumlah maksimum ruang untuk diganti. | |
| Minlinewidth | Salah satu… Nomor Rangkaian Fungsi | 15% | Lebar minimum dari baris terakhir, di bawahnya ruang yang tidak memecahkan akan dimasukkan sampai minimum dipenuhi.
| |
| nbspchar | Salah satu… Rangkaian Elemen Bereaksi Fungsi | u00A0 | Karakter atau elemen untuk digunakan saat mengganti ruang. Default ke karakter ruang non-breaking standar, yang hampir pasti Anda pasang kecuali jika Anda ingin memvisualisasikan di mana ruang yang tidak pecah dimasukkan untuk tujuan debugging, atau menyesuaikan lebarnya.
| |
| Reflowkey | Salah satu… Nomor Rangkaian | Jika ditentukan, nonaktifkan reflow otomatis sehingga Anda dapat memicu secara manual dengan mengubah nilai ini. Prop itu sendiri tidak melakukan apa -apa, tetapi mengubahnya akan menyebabkan bereaksi memperbarui komponen. | ||
| Reflowtimeout | Nomor | Debounces reflows sehingga mereka sering terjadi dalam milidetik (pada akhir durasi yang diberikan). Jika tidak ditentukan, reflow dihitung setiap kali komponen diterjemahkan. | ||
| dengan disabilitas | Boolean | Apakah akan sepenuhnya menonaktifkan pencegahan janda. | ||
| Onreflow | Fungsi | Fungsi untuk menelepon ketika tata letak telah dihitung ulang dan substitusi ruang dilakukan. | ||
| preset | Rangkaian | Nama preset yang didefinisikan dalam | ||
import { Justify } from 'react-typesetting' ; Meskipun ini mungkin termasuk fitur justifikasi yang lebih canggih di masa depan, saat ini sangat sederhana: secara kondisionalnya berlaku text-align: justify ke elemen wadahnya (a <p> secara default) tergantung pada apakah ada cukup ruang untuk menghindari celah kata yang besar atau tidak. Lebar minimum ditentukan oleh minWidth dan default ke 16 EMS.
Anda mungkin juga menyelesaikan ini dengan kueri media, tetapi komponen ini dapat menentukan lebar persis yang tersedia untuk elemen kontainer, bukan hanya seluruh halaman.
| Nama | Jenis | Bawaan | Keterangan | |
|---|---|---|---|---|
| ClassName | Rangkaian | Kelas untuk diterapkan pada elemen pembungkus luar yang dibuat oleh komponen ini. | ||
| gaya | Obyek | Properti gaya ekstra untuk ditambahkan ke elemen pembungkus luar yang dibuat oleh komponen ini. | ||
| anak-anak | Node | Konten untuk diterjemahkan. | ||
| sebagai | Salah satu… Rangkaian Fungsi Obyek | P | Jenis elemen untuk membuat anak -anak yang disediakan. Itu harus berupa elemen level blok, seperti | |
| Minwidth | Salah satu… Nomor Rangkaian | 16em | Lebar minimum untuk memungkinkan teks yang dibenarkan. Angka menunjukkan lebar piksel absolut. String akan diterapkan pada CSS elemen untuk melakukan perhitungan lebar. | |
| inisial yang dapat dibenarkan | Boolean | BENAR | Apakah pada awalnya mengatur | |
| Reflowkey | Salah satu… Nomor Rangkaian | Jika ditentukan, nonaktifkan reflow otomatis sehingga Anda dapat memicu secara manual dengan mengubah nilai ini. Prop itu sendiri tidak melakukan apa -apa, tetapi mengubahnya akan menyebabkan bereaksi memperbarui komponen. | ||
| Reflowtimeout | Nomor | Debounces reflows sehingga mereka sering terjadi dalam milidetik (pada akhir durasi yang diberikan). Jika tidak ditentukan, reflow dihitung setiap kali komponen diterjemahkan. | ||
| dengan disabilitas | Boolean | Apakah akan sepenuhnya menonaktifkan deteksi pembenaran. Penyelarasan terakhir yang diterapkan akan dilestarikan. | ||
| Onreflow | Fungsi | Fungsi untuk menelepon ketika tata letak telah dihitung ulang dan pembenaran telah diterapkan atau tidak diterapkan. | ||
| preset | Rangkaian | Nama preset yang didefinisikan dalam | ||
import { FontObserver } from 'react-typesetting' ; Komponen untuk mengamati font yang ditentukan dalam komponen FontObserver.Provider .
| Nama | Jenis | Bawaan | Keterangan | |
|---|---|---|---|---|
| anak-anak | Fungsi | Fungsi yang akan menerima status saat ini dari font yang diamati. Argumen akan menjadi objek dengan properti ini:
| ||
import { FontObserver } from 'react-typesetting' ;Penyedia konteks untuk menentukan font mana yang harus diamati.
| Nama | Jenis | Bawaan | Keterangan | |
|---|---|---|---|---|
| font | Array… Salah satu… Rangkaian Objek 1 | Font untuk memuat dan mengamati. File font itu sendiri seharusnya sudah ditentukan di suatu tempat (dalam CSS), komponen ini hanya menggunakan Setiap item dalam array menentukan | ||
| 1 objek | ||||
| keluarga | Rangkaian | |||
| berat | Salah satu… Nomor Rangkaian | |||
| gaya | Rangkaian | |||
| menggeliat | Rangkaian | |||
| testString | Rangkaian | |||
| Batas waktu | Nomor | |||
| testString | Rangkaian | String tes khusus untuk diteruskan ke metode | ||
| Batas waktu | Nomor | Batas waktu kustom dalam milidetik untuk diteruskan ke metode | ||
| anak-anak | Node | Konten yang akan memiliki akses ke status pemuatan font melalui konteks. | ||
import { Typesetting } from 'react-typesetting' ; Penyedia konteks untuk mendefinisikan preset untuk semua komponen react-typesetting lainnya untuk digunakan.
| Nama | Jenis | Bawaan | Keterangan | |
|---|---|---|---|---|
| preset | Obyek | {} | Nama preset pemetaan objek ke alat peraga default. Misalnya, diberi nilainya: { myPreset : { minFontSize : 1 , maxIterations : 3 } } ... Komponen < TightenText preset = "myPreset" /> | |
| anak-anak | Node | Konten yang akan memiliki akses ke preset yang ditentukan melalui konteks. | ||
