react fontpicker

selector de fuentes de reacción

Un componente de selección de fuentes de Google para React.

• Sin dependencias (aparte de React)
• No se requiere clave API de Google
• Más de 1600 fuentes de Google, personalizables
• Vistas previas de fuentes rápidas y de alta calidad a partir de imágenes SVG pregeneradas
• Opcionalmente, carga automáticamente las fuentes.

Bifurcado de https://github.com/Mikk3lRo/vue-fontpicker/

Documentación

Hay una demostración en vivo que incluye el uso disponible en: https://ae9is.github.io/react-fontpicker/

Instalación

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

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

Luego, importe el componente y la hoja de estilo:

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

Estilo

Vea los nombres de clases CSS en: paquetes/fontpicker/src/components/FontPicker.css

Un ejemplo de rediseño del selector de fuentes.

Un ejemplo de integración del selector de fuentes en una aplicación real: ae9is/uimix

Estructura del proyecto

El proyecto del selector de fuentes se encuentra en este monorepo de Turborepo en paquetes/fontpicker/

La demostración en vivo es una aplicación Vite que puede ejecutar usted mismo a través de npm run dev y que se compila en /docs . Utiliza tsconfig.json .

El componente selector de fuentes se construye a través de tsup (es decir, esbuild ) en /dist con definiciones de tipo generadas a través de tsc de acuerdo con tsconfig.types.json .

El script de generación de vista previa de fuentes descarga archivos de fuentes en /font-cache y crea vistas previas de imágenes de fuentes en /font-preview .

Actuación

Las vistas previas del selector de fuentes funcionan cargando archivos de imagen de vista previa de fuentes en CSS. Las fuentes se dividen en muchos archivos de imagen para una vista previa inicial más rápida.

Una vez que se abre la selección desplegable, se recuperan todos los archivos de imágenes de vista previa, lo que permite un desplazamiento y búsqueda fluidos.

No se realizan solicitudes a la API de fuentes de Google a menos que el selector de fuentes esté configurado para cargarse automáticamente, en cuyo caso la fuente seleccionada actualmente se agrega al encabezado de la página. (El enlace de fuente seleccionado previamente no se elimina).

Por ejemplo:

 < 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 >

La gran desventaja de este enfoque es que el paquete del componente es bastante grande debido a todas las vistas previas de imágenes de fuentes: 8 MB en imágenes SVG comprimidas para 1633 fuentes. ¡Asegúrate de ofrecer SVG comprimidos! Vea aquí un ejemplo de Vite.

Si está buscando una opción más liviana, puede usar react-fontpicker-ts-lite que pesa alrededor de 180 KB.

O, para obtener un selector de fuentes diferente siguiendo un enfoque bajo demanda, consulte: https://github.com/samuelmeuli/font-picker-react

font-picker-react requiere una clave API de Google y funciona mejor con el límite de fuentes predeterminado de 50 (fuentes para elegir).

Construyendo vistas previas de fuentes

Nota: la mayoría de los usuarios no deberían necesitar reconstruir las vistas previas de fuentes, pero esta sección se incluye para su comodidad si necesita obtener las fuentes más recientes o editar las vistas previas.

1. Clave API de Google

Obtenga una clave API de Google aquí https://developers.google.com/fonts/docs/developer_api#APIKey y cree un nuevo archivo llamado GOOGLE_API_KEY en react-fontpicker/packages/fontpicker/scripts , en el mismo directorio que scripts/buildFontPreviews.ts guión scripts/buildFontPreviews.ts .

2. Script de vista previa de fuentes

Todas las fuentes de Google

Para generar vistas previas de fuentes para todas las fuentes de Google disponibles actualmente (solo familias de fuentes latinas, menos Kumar One ).

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

Nota: Para 1600 fuentes, calcule entre 20 y 30 minutos y 800 MB para descargar todas las fuentes. La compilación de las vistas previas de las imágenes debería llevar menos de un minuto. Cuando se vuelve a ejecutar, el script solo recupera información de fuentes nuevas si tiene más de 1 semana y omite la descarga de fuentes almacenadas en caché.

Fuentes personalizadas

Para generar vistas previas de fuentes personalizadas, necesitará información sobre las fuentes y las rutas al archivo de fuente descargado en formato TTF.

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

Donde font-variants-info es una matriz de valores como 0,400 y 1,700 unidos por +. El primer valor indica una fuente normal (0) o cursiva (1). El segundo valor es el peso de la fuente (es decir, 100 = fina, 400 = normal, 700 = negrita, 900 = gruesa).

Por ejemplo:

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 "

Consulte el script de ejecución build-font-previews-manual en: paquetes/fontpicker/package.json

Desarrollo

Instalación

Este monorepo usa Turborepo.

Pruebas

La aplicación utiliza Vitest y Cypress para realizar pruebas. Asegúrese de configurar los requisitos previos para Cypress en su sistema.

En Ubuntu:

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