font picker react

Schriftart zum Reagieren

Ein einfacher, anpassbarer Schriftart Picker, mit dem Benutzer Google -Schriftarten auf Ihrer Website in der Vorschau anstellen, auswählen und verwenden können.

• Einfaches Setup
• Keine Abhängigkeiten
• Automatische Schriftart Download und Erzeugung der erforderlichen CSS -Selektoren
• Effiziente Schriftart Vorschau (vollständige Schriftarten werden nur bei Auswahl heruntergeladen)

→ Demo

Dies ist die React -Komponente für die Font Picker -Bibliothek.

Erste Schritte

Um auf die API zugreifen zu können, müssen Sie einen Google -Schriftarten -API -Schlüssel erstellen.

1. Setup

Installieren Sie das font-picker-react mit NPM:

npm install font-picker-react

2. Anzeigen des Schriftarts für die Schriftart

Fügen Sie die FontPicker -Komponente in Ihren React -Code hinzu:

 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. Anwenden der ausgewählten Schriftart

Fügen Sie alle JSX-Elemente, auf die Sie die ausgewählte Schriftart anwenden möchten, die Klasse "apply-font" hinzu.

Wenn der Benutzer eine Schriftart auswählt, wird er automatisch heruntergeladen und auf alle Elemente mit der Klasse "apply-font" angewendet.

Requisiten

Die folgenden Requisiten können an die FontPicker -Komponente übergeben werden:

• apiKey (erforderlich) : Google API -Schlüssel
• activeFontFamily : Schriftart, die im Schriftart ausgewählt und auf den Text angewendet werden sollte. Sollte im Komponentenzustand gespeichert und mit onChange aktualisiert werden
• onChange : Funktion, die ausgeführt wird, wenn der Benutzer die aktive Schriftart ändert. Diese Funktion sollte activeFontFamily im Komponentenzustand aktualisieren
• pickerId : Wenn Sie mehrere Schriftarten auf Ihrer Website haben, müssen Sie ihnen eindeutige IDs angeben, die als Requisite bereitgestellt und an die .apply-font Klassennamen angehängt werden müssen. Beispiel: Wenn pickerId="main" , verwenden Sie className="apply-font-main"
• families : Wenn in der Liste nur bestimmte Schriftarten angezeigt werden, geben Sie ihre Namen in einem Array an. Standard: Alle Schriftfamilienfamilien
• categories : Array von Schriftkategorien, die in die Liste aufgenommen werden sollen. Mögliche Werte: "sans-serif", "serif", "display", "handwriting", "monospace" . Standard: Alle Kategorien
• scripts : Array von Skripten, die die Schriftarten enthalten müssen und die bei der Schriftauswahl heruntergeladen werden. Standard: ["latin"] . Beispiel: ["latin", "greek", "hebrew"] (siehe alle möglichen Werte)
• variants : Array von Varianten, die die Schriftarten enthalten müssen und die bei der Schriftauswahl heruntergeladen werden. Standard: ["regular"] . Beispiel: ["regular", "italic", "700", "700italic"] (siehe alle möglichen Werte)
• filter : Funktion, die nach true bewerten muss, damit eine Schriftart in die Liste aufgenommen wird. Standard: font => true . Beispiel: Wenn font => font.family.toLowerCase().startsWith("m") , werden nur Schriftarten, deren Namen mit "M" beginnen
• limit : Maximale Anzahl von Schriftarten, die in der Liste angezeigt werden sollen (die am wenigsten beliebten Schriftarten werden weggelassen). Standard: 50
• sort : Sortieren des Attributs für die Schriftliste. Mögliche Werte: "alphabet", "popularity" . Standard: "alphabet"

Derzeit sind nur die activeFontFamily , onChange und sort -Requisiten reaktiv.

Entwicklung

Anforderungen: Node.js, Garn

1. Klonen Sie dieses Repository: git clone REPO_URL
2. Installieren Sie alle Abhängigkeiten: yarn
3. Generieren Sie das Bibliotheksbündel: yarn start
4. Sehen Sie sich die gerenderte Komponente auf localhost:3000

Vorschläge und Beiträge sind immer willkommen! Bitte besprechen Sie größere Änderungen über das Problem, bevor Sie eine Pull -Anfrage senden.