react fontpicker

reaksi-fontpicker

Komponen pemilih font Google untuk React.

• Tidak ada ketergantungan (selain React)
• Tidak diperlukan kunci Google API
• 1600+ font Google, dapat disesuaikan
• Pratinjau font yang cepat dan berkualitas tinggi dari gambar SVG yang telah dibuat sebelumnya
• Secara opsional memuat font secara otomatis

Bercabang dari https://github.com/Mikk3lRo/vue-fontpicker/

Dokumentasi

Demo langsung termasuk penggunaan tersedia di: https://ae9is.github.io/react-fontpicker/

Menginstal

 # npm
npm i react-fontpicker-ts
# yarn
yarn add react-fontpicker-ts

# much smaller package with fewer fonts
npm i react-fontpicker-ts-lite

Kemudian, impor komponen dan stylesheet:

 import FontPicker from 'react-fontpicker-ts'
import 'react-fontpicker-ts/dist/index.css' 

Penataan gaya

Lihat nama kelas css di: package/fontpicker/src/components/FontPicker.css

Contoh menata ulang pemetik font

Contoh mengintegrasikan pemilih font ke dalam aplikasi sebenarnya: ae9is/uimix

Struktur proyek

Proyek pemetik font ada di turborepo monorepo ini di paket/fontpicker/

Demo langsung adalah aplikasi Vite yang dapat Anda jalankan sendiri melalui npm run dev dan dibuat untuk /docs . Menggunakan tsconfig.json .

Komponen pemilih font itu sendiri dibangun melalui tsup (yaitu esbuild ) ke /dist dengan definisi tipe yang dihasilkan melalui tsc menurut tsconfig.types.json .

Skrip pembuatan pratinjau font mengunduh file font ke /font-cache dan membuat pratinjau gambar font ke /font-preview .

Pertunjukan

Pratinjau pemilih font berfungsi dengan memuat file gambar pratinjau font dalam CSS. Font dibagi menjadi banyak file gambar untuk pratinjau awal yang lebih cepat.

Setelah pilihan dropdown dibuka, semua file gambar pratinjau diambil sehingga memungkinkan pengguliran dan pencarian yang lancar.

Tidak ada permintaan yang dibuat ke API font Google kecuali pemilih font disetel ke muat otomatis, dalam hal ini font yang dipilih saat ini ditambahkan ke header halaman. (Tautan font yang dipilih sebelumnya tidak dihapus.)

Misalnya:

 < head >
  ...
  < link
    rel =" stylesheet "
    id =" google-font-rock_salt-all "
    href =" https://fonts.googleapis.com/css2?family=Rock Salt:ital,wght@0,400&amp;display=swap "
  />
</ head >

Keuntungan besar dari pendekatan ini adalah bundel komponennya cukup besar karena semua pratinjau gambar font: 8 MB dalam gambar SVG terkompresi untuk 1633 font. Pastikan Anda menyajikan SVG terkompresi! Lihat di sini untuk contoh Vite.

Jika Anda mencari opsi yang lebih ringan, Anda dapat menggunakan react-fontpicker-ts-lite yang berukuran sekitar 180 KB.

Atau, untuk pemilih font lain yang mengikuti pendekatan sesuai permintaan, lihat: https://github.com/samuelmeuli/font-picker-react

font-picker-react memerlukan kunci Google API, dan berfungsi paling baik pada batas font default 50 (font dapat dipilih).

Membangun pratinjau font

Catatan: sebagian besar pengguna tidak perlu membuat ulang pratinjau font, namun bagian ini disertakan untuk kenyamanan jika Anda perlu mengambil font terbaru atau mengedit pratinjau.

1. Kunci Google API

Dapatkan kunci Google API di sini https://developers.google.com/fonts/docs/developer_api#APIKey dan buat file baru bernama GOOGLE_API_KEY di react-fontpicker/packages/fontpicker/scripts , di direktori yang sama dengan scripts/buildFontPreviews.ts skrip scripts/buildFontPreviews.ts .

2. Skrip pratinjau font

Semua font Google

Untuk menghasilkan pratinjau font untuk semua font Google yang tersedia saat ini (hanya jenis font latin, kecuali Kumar One ).

 cd react-fontpicker/packages/fontpicker
npm run build-font-previews

Catatan: Untuk 1600 font, anggarankan 20-30 menit dan 800 MB untuk mendownload semua font. Mengompilasi pratinjau gambar itu sendiri seharusnya memakan waktu kurang dari satu menit. Saat dijalankan kembali, skrip hanya mengambil info font baru jika lebih lama dari 1 minggu dan melewatkan pengunduhan font yang di-cache.

Font khusus

Untuk menghasilkan pratinjau font untuk font khusus, Anda memerlukan beberapa informasi tentang font dan jalur ke file font yang diunduh dalam format TTF.

buildFontPreviews.ts output-dir " font-name|font-category|font-variants-info|font-file " " font-name-2... "

Dimana font-variants-info adalah array nilai seperti 0,400 dan 1,700 yang digabungkan dengan +. Nilai pertama menunjukkan font normal (0) atau miring (1). Nilai kedua adalah berat font (yaitu 100 = tipis, 400 = normal, 700 = tebal, 900 = berat).

Misalnya:

buildFontPreviews.ts output-dir " FontName|sans-serif|0,400+0,700+1,400+1,700|/path/to/font.ttf " " Font2|serif|0,400|/path/to/font2.ttf "

Lihat skrip run build-font-previews-manual di: package/fontpicker/package.json

Perkembangan

Instalasi

Monorepo ini menggunakan Turborepo.

Pengujian

Aplikasi ini menggunakan Vitest dan Cypress untuk pengujian. Pastikan untuk mengatur prasyarat untuk Cypress di sistem Anda.

Di Ubuntu:

apt install libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 libxtst6 xauth xvfb