font picker react

for for React的字體選擇器

一個簡單，可自定義的字體選擇器，允許用戶在您的網站上預覽，選擇和使用Google字體。

• 簡單設置
• 沒有依賴性
• 自動字體下載並生成所需的CSS選擇器
• 有效的字體預覽（僅在選擇中下載完整字體）

→演示

這是字體選擇器庫的反應組件。

入門

為了能夠訪問API，您需要生成Google字體API密鑰。

1。設定

使用NPM安裝font-picker-react軟件包：

npm install font-picker-react

2。顯示字體選擇器

將FontPicker組件添加到您的React代碼：

 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"

當前，只有activeFontFamily ， onChange和sort Prop是反應性的。

發展

要求：Node.js，紗

1. 克隆此存儲庫： git clone REPO_URL
2. 安裝所有依賴項： yarn
3. 生成圖書館捆綁包： yarn start
4. 查看localhost:3000

總是歡迎建議和貢獻！在提交拉動請求之前，請通過問題討論更大的更改。