font picker react

反応用のフォントピッカー

ユーザーがWebサイトでGoogleフォントをプレビュー、選択、使用できるシンプルでカスタマイズ可能なフォントピッカー。

• 簡単なセットアップ
• 依存関係はありません
• 必要なCSSセレクターの自動フォントのダウンロードと生成
• 効率的なフォントプレビュー（フルフォントは選択時にのみダウンロードされます）

→デモ

これは、フォントピッカーライブラリのReactコンポーネントです。

はじめる

APIにアクセスできるようにするには、Google Fonts 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.選択したフォントを適用します

選択したフォントを適用するすべてのJSX要素にクラス"apply-font"を追加します。

ユーザーがフォントを選択すると、 "apply-font"クラスを使用してすべての要素に自動的にダウンロードされ、適用されます。

小道具

次の小道具は、 FontPickerコンポーネントに渡すことができます。

• apiKey （必須） ：Google APIキー
• activeFontFamily ：フォントピッカーで選択し、テキストに適用するフォント。コンポーネント状態に保存し、 onChangeを使用して更新する必要があります
• onChange ：ユーザーがアクティブフォントを変更したときに実行される関数。この関数は、コンポーネント状態のactiveFontFamilyを更新する必要があります
• pickerId ：サイトに複数のフォントピッカーがある場合は、プロップとして提供され、 .apply-fontクラス名に追加される一意のIDを提供する必要があります。例： 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 Propsのみが反応しています。

発達

要件：node.js、糸

1. このリポジトリのクローン： git clone REPO_URL
2. すべての依存関係をインストール： yarn
3. ライブラリバンドルを生成します： yarn start
4. localhost:3000でレンダリングされたコンポーネントを表示します

提案と貢献はいつでも大歓迎です！プルリクエストを送信する前に、問題を介してより大きな変更について話し合ってください。