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

总是欢迎建议和贡献！在提交拉动请求之前，请通过问题讨论更大的更改。