font picker react

Pemetik font untuk bereaksi

Pemilih font sederhana dan dapat disesuaikan yang memungkinkan pengguna untuk melihat pratinjau, memilih dan menggunakan Google Font di situs web Anda.

• Pengaturan Sederhana
• Tidak ada dependensi
• Unduhan font otomatis dan pembuatan pemilih CSS yang diperlukan
• Pratinjau font yang efisien (font lengkap hanya diunduh pada pemilihan)

→ Demo

Ini adalah komponen React untuk pustaka pemetik font .

Memulai

Untuk dapat mengakses API, Anda harus menghasilkan kunci API Google Fonts.

1. Pengaturan

Instal paket font-picker-react menggunakan NPM:

npm install font-picker-react

2. Menampilkan pemetik font

Tambahkan komponen FontPicker ke kode React Anda:

 import React , { Component } from "react" ;
import FontPicker from "font-picker-react" ;

export default class ExampleComponent extends Component {
	constructor ( props ) {
		super ( props ) ;
		this . state = {
			activeFontFamily : "Open Sans" ,
		} ;
	}

	render ( ) {
		return (
			< div >
				< FontPicker
					apiKey = "YOUR_API_KEY"
					activeFontFamily = { this . state . activeFontFamily }
					onChange = { ( nextFont ) =>
						this . setState ( {
							activeFontFamily : nextFont . family ,
						} )
					}
				/>
				< p className = "apply-font" > The font will be applied to this text. </ p >
			</ div >
		) ;
	}
}

3. Menerapkan font yang dipilih

Tambahkan kelas "apply-font" ke semua elemen JSX yang ingin Anda terapkan font yang dipilih.

Ketika pengguna memilih font, itu akan secara otomatis diunduh dan diterapkan ke semua elemen dengan kelas "apply-font" .

Alat peraga

Alat peraga berikut dapat diteruskan ke komponen FontPicker :

• apiKey (wajib) : Kunci API Google
• activeFontFamily : Font yang harus dipilih dalam pemetik font dan diterapkan pada teks. Harus disimpan dalam keadaan komponen dan diperbarui menggunakan onChange
• onChange : Fungsi yang dieksekusi ketika pengguna mengubah font aktif. Fungsi ini harus memperbarui activeFontFamily dalam keadaan komponen
• pickerId : Jika Anda memiliki beberapa pemetik font di situs Anda, Anda perlu memberi mereka ID unik yang harus disediakan sebagai penyangga dan ditambahkan ke nama kelas .apply-font . Contoh: Jika pickerId="main" , gunakan className="apply-font-main"
• families : Jika hanya font spesifik yang akan muncul dalam daftar, tentukan nama mereka dalam array. Default: Semua keluarga font
• categories : Array kategori font untuk dimasukkan dalam daftar. Nilai-nilai yang mungkin: "sans-serif", "serif", "display", "handwriting", "monospace" . Default: Semua kategori
• scripts : Array skrip yang harus dimasukkan font dan yang akan diunduh pada pemilihan font. Default: ["latin"] . Contoh: ["latin", "greek", "hebrew"] (lihat semua nilai yang mungkin)
• variants : Array varian yang harus dimasukkan font dan yang akan diunduh pada pemilihan font. Default: ["regular"] . Contoh: ["regular", "italic", "700", "700italic"] (lihat semua nilai yang mungkin)
• filter : Fungsi yang harus dievaluasi ke true agar font dimasukkan dalam daftar. Default: font => true . Contoh: jika font => font.family.toLowerCase().startsWith("m") , hanya font yang namanya dimulai dengan "m" akan ada dalam daftar
• limit : Jumlah maksimum font untuk ditampilkan dalam daftar (font yang paling tidak populer akan dihilangkan). Default: 50
• sort : Atribut penyortiran untuk daftar font. Nilai yang mungkin: "alphabet", "popularity" . Default: "alphabet"

Saat ini, hanya activeFontFamily , onChange dan sort Props yang reaktif.

Perkembangan

Persyaratan: node.js, benang

1. Klon Repositori ini: git clone REPO_URL
2. Instal semua dependensi: yarn
3. Hasilkan Bundel Perpustakaan: yarn start
4. Lihat Komponen yang Diberikan di localhost:3000

Saran dan kontribusi selalu diterima! Harap diskusikan perubahan yang lebih besar melalui masalah sebelum mengirimkan permintaan tarik.