ดาวน์โหลด font picker react - font picker react ซอร์สโค้ด

font picker react

ดาวน์โหลดแบบอักษร

v3.5.2

ดาวน์โหลด

ตัวเลือกแบบอักษรสำหรับ React

ตัวเลือกแบบอักษรที่ง่ายและปรับแต่งได้ช่วยให้ผู้ใช้สามารถดูตัวอย่างเลือกและใช้ Google Fonts บนเว็บไซต์ของคุณ

การตั้งค่าอย่างง่าย
ไม่มีการพึ่งพา
การดาวน์โหลดแบบอักษรอัตโนมัติและการสร้างตัวเลือก CSS ที่ต้องการ
ตัวอย่างฟอนต์ที่มีประสิทธิภาพ (แบบอักษรเต็มจะถูกดาวน์โหลดเฉพาะในการเลือกเท่านั้น)

→ สาธิต

นี่คือองค์ประกอบปฏิกิริยาสำหรับไลบรารี ตัวเลือกตัวอักษร

ตัวอย่างฟอนต์ตัวเลือก

เริ่มต้น

เพื่อให้สามารถเข้าถึง API ได้คุณจะต้องสร้างคีย์ Google Fonts API

1. การตั้งค่า

ติดตั้งแพ็คเกจ font-picker-react โดยใช้ NPM:

npm install font-picker-react

2. การแสดงตัวเลือกแบบอักษร

เพิ่มส่วนประกอบ FontPicker ลงในรหัสปฏิกิริยาของคุณ:

 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. การใช้แบบอักษรที่เลือก

เพิ่มคลาส "apply-font" ในองค์ประกอบ JSX ทั้งหมดที่คุณต้องการใช้ฟอนต์ที่เลือกไว้

เมื่อผู้ใช้เลือกแบบอักษรจะมีการดาวน์โหลดและนำไปใช้กับองค์ประกอบทั้งหมดด้วยคลาส "apply-font" โดยอัตโนมัติ

อุปกรณ์ประกอบฉาก

อุปกรณ์ประกอบฉากต่อไปนี้สามารถส่งผ่านไปยังองค์ประกอบ FontPicker :

apiKey (จำเป็น) : คีย์ Google API
activeFontFamily : แบบอักษรที่ควรเลือกในตัวเลือกตัวอักษรและนำไปใช้กับข้อความ ควรเก็บไว้ในสถานะส่วนประกอบและอัปเดตโดยใช้ onChange
onChange : ฟังก์ชั่นที่ดำเนินการเมื่อผู้ใช้เปลี่ยนฟอนต์ที่ใช้งานอยู่ ฟังก์ชั่นนี้ควรอัปเดต activeFontFamily ในสถานะส่วนประกอบ
pickerId : หากคุณมีตัวเลือกแบบอักษรหลายตัวในเว็บไซต์ของคุณคุณจะต้องให้ ID ที่ไม่ซ้ำกันซึ่งจะต้องให้เป็นเสาและผนวกเข้ากับชื่อ .apply-font . ตัวอย่าง: ถ้า pickerId="main" ใช้ className="apply-font-main"
families : หากมีเพียงแบบอักษรที่เฉพาะเจาะจงเท่านั้นที่จะปรากฏในรายการให้ระบุชื่อของพวกเขาในอาร์เรย์ ค่าเริ่มต้น: ครอบครัวแบบอักษรทั้งหมด
categories : อาร์เรย์ของหมวดฟอนต์ที่จะรวมไว้ในรายการ ค่าที่เป็นไปได้: "sans-serif", "serif", "display", "handwriting", "monospace" ค่าเริ่มต้น: หมวดหมู่ทั้งหมด
scripts : อาร์เรย์ของสคริปต์ซึ่งแบบอักษรจะต้องรวมและจะดาวน์โหลดในการเลือกแบบอักษร ค่าเริ่มต้น: ["latin"] ตัวอย่าง: ["latin", "greek", "hebrew"] (ดูค่าที่เป็นไปได้ทั้งหมด)
variants : อาเรย์ของตัวแปรซึ่งแบบอักษรจะต้องรวมและจะดาวน์โหลดในการเลือกแบบอักษร ค่าเริ่มต้น: ["regular"] ตัวอย่าง: ["regular", "italic", "700", "700italic"] (ดูค่าที่เป็นไปได้ทั้งหมด)
filter : ฟังก์ชั่นที่ต้องประเมินเป็น true สำหรับตัวอักษรที่จะรวมอยู่ในรายการ ค่าเริ่มต้น: font => true ตัวอย่าง: ถ้า font => font.family.toLowerCase().startsWith("m") เฉพาะฟอนต์ที่มีชื่อเริ่มต้นด้วย "m" จะอยู่ในรายการ
limit : จำนวนแบบอักษรสูงสุดที่จะแสดงในรายการ (จะละเว้นแบบอักษรที่ได้รับความนิยมน้อยที่สุด) ค่าเริ่มต้น: 50
sort : การเรียงลำดับแอตทริบิวต์สำหรับรายการตัวอักษร ค่าที่เป็นไปได้: "alphabet", "popularity" ค่าเริ่มต้น: "alphabet"