react fontpicker

réagir-fontpicker

Un composant de sélecteur de polices Google pour React.

• Aucune dépendance (autre que React)
• Aucune clé API Google requise
• Plus de 1 600 polices Google, personnalisables
• Aperçus rapides et de haute qualité des polices à partir d'images SVG pré-générées
• En option, chargement automatique des polices

Tiré de https://github.com/Mikk3lRo/vue-fontpicker/

Documentation

Une démo en direct incluant l'utilisation est disponible sur : https://ae9is.github.io/react-fontpicker/

Installation

 # npm
npm i react-fontpicker-ts
# yarn
yarn add react-fontpicker-ts

# much smaller package with fewer fonts
npm i react-fontpicker-ts-lite

Ensuite, importez le composant et la feuille de style :

 import FontPicker from 'react-fontpicker-ts'
import 'react-fontpicker-ts/dist/index.css' 

Stylisme

Voir les noms de classes CSS dans : packages/fontpicker/src/components/FontPicker.css

Un exemple de relookage du sélecteur de polices

Un exemple intégrant le sélecteur de polices dans une application réelle : ae9is/uimix

Structure du projet

Le projet de sélecteur de polices réside dans ce monorepo Turborepo dans packages/fontpicker/

La démo en direct est une application Vite que vous pouvez exécuter vous-même via npm run dev et qui s'appuie sur /docs . Utilise tsconfig.json .

Le composant sélecteur de polices lui-même est construit via tsup (c'est-à-dire esbuild ) vers /dist avec des définitions de type générées via tsc selon tsconfig.types.json .

Le script de génération d'aperçu des polices télécharge les fichiers de polices dans /font-cache et crée des aperçus d'images de polices dans /font-preview .

Performance

Les aperçus du sélecteur de polices fonctionnent en chargeant les fichiers image d’aperçu des polices en CSS. Les polices sont réparties sur plusieurs fichiers image pour un aperçu initial plus rapide.

Une fois la sélection déroulante ouverte, tous les fichiers d'image d'aperçu sont récupérés, permettant un défilement et une recherche fluides.

Aucune requête n'est adressée à l'API des polices Google, sauf si le sélecteur de polices est configuré pour être chargé automatiquement, auquel cas la police actuellement sélectionnée est ajoutée à l'en-tête de la page. (Le lien de police précédemment sélectionné n'est pas supprimé.)

Par exemple:

 < head >
  ...
  < link
    rel =" stylesheet "
    id =" google-font-rock_salt-all "
    href =" https://fonts.googleapis.com/css2?family=Rock Salt:ital,wght@0,400&amp;display=swap "
  />
</ head >

Le gros compromis de cette approche est que l'ensemble du composant est assez volumineux en raison de tous les aperçus d'images de polices : 8 Mo d'images SVG compressées pour 1 633 polices. Assurez-vous de servir des SVG compressés ! Voir ici pour un exemple pour Vite.

Si vous recherchez une option plus légère, vous pouvez utiliser à la place react-fontpicker-ts-lite qui fait environ 180 Ko.

Ou, pour un sélecteur de polices différent suivant une approche à la demande, consultez : https://github.com/samuelmeuli/font-picker-react

font-picker-react nécessite une clé API Google et fonctionne mieux avec la limite de polices par défaut de 50 (polices parmi lesquelles choisir).

Création d'aperçus de polices

Remarque : la plupart des utilisateurs ne devraient pas avoir besoin de reconstruire les aperçus des polices, mais cette section est incluse pour plus de commodité si vous devez récupérer les dernières polices ou modifier les aperçus.

1. Clé API Google

Obtenez une clé API Google ici https://developers.google.com/fonts/docs/developer_api#APIKey et créez un nouveau fichier appelé GOOGLE_API_KEY dans react-fontpicker/packages/fontpicker/scripts , dans le même répertoire que scripts/buildFontPreviews.ts .

2. Script d'aperçu des polices

Toutes les polices Google

Pour générer des aperçus de polices pour toutes les polices Google actuellement disponibles (familles de polices latines uniquement, moins Kumar One ).

 cd react-fontpicker/packages/fontpicker
npm run build-font-previews

Remarque : pour 1 600 polices, prévoyez 20 à 30 minutes et 800 Mo pour télécharger toutes les polices. La compilation des aperçus d’images eux-mêmes devrait prendre moins d’une minute. Lors de sa réexécution, le script ne récupère les nouvelles informations sur les polices que si elles datent de plus d'une semaine et ignore le téléchargement des polices mises en cache.

Polices personnalisées

Pour générer des aperçus de polices pour les polices personnalisées, vous aurez besoin de quelques informations sur les polices et les chemins d'accès au fichier de police téléchargé au format TTF.

buildFontPreviews.ts output-dir " font-name|font-category|font-variants-info|font-file " " font-name-2... "

Où font-variants-info est un tableau de valeurs telles que 0,400 et 1,700 jointes par +. La première valeur désigne une police normale (0) ou italique (1). La deuxième valeur est le poids de la police (c'est-à-dire 100 = fin, 400 = normal, 700 = gras, 900 = épais).

Par exemple:

buildFontPreviews.ts output-dir " FontName|sans-serif|0,400+0,700+1,400+1,700|/path/to/font.ttf " " Font2|serif|0,400|/path/to/font2.ttf "

Voir le script d'exécution build-font-previews-manual dans : packages/fontpicker/package.json

Développement

Installation

Ce monorepo utilise Turborepo.

Essai

L'application utilise Vitest et Cypress pour les tests. Assurez-vous de configurer les prérequis pour Cypress sur votre système.

Sur Ubuntu :

apt install libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 libxtst6 xauth xvfb