font picker react

Picker de fuentes para React

Un selector de fuentes simple y personalizable que permite a los usuarios obtener una vista previa, seleccionar y usar Google Fonts en su sitio web.

• Configuración simple
• Sin dependencias
• Descarga automática de fuentes y generación de los selectores CSS requeridos
• Vistas previas de fuente eficientes (las fuentes completas solo se descargan en la selección)

→ Demo

Este es el componente React para la biblioteca de seleccionadores de fuentes .

Empezando

Para poder acceder a la API, necesitará generar una clave API de Google Fonts.

1. Configuración

Instale el paquete font-picker-react con NPM:

npm install font-picker-react

2. Mostrar el selector de fuentes

Agregue el componente FontPicker a su código 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. Aplicando la fuente seleccionada

Agregue la clase "apply-font" a todos los elementos JSX a los que desea aplicar la fuente seleccionada.

Cuando el usuario selecciona una fuente, se descargará automáticamente y se aplicará a todos los elementos con la clase "apply-font" .

Accesorios

Los siguientes accesorios se pueden pasar al componente FontPicker :

• apiKey (requerido) : clave de API de Google
• activeFontFamily : fuente que debe seleccionarse en el selector de fuentes y aplicarse al texto. Debe almacenarse en el estado del componente y actualizarse utilizando onChange
• onChange : función que se ejecuta cuando el usuario cambia la fuente activa. Esta función debe actualizar activeFontFamily en el estado del componente
• pickerId : si tiene múltiples recolectores de fuentes en su sitio, debe darles ID únicos que deben proporcionarse como un accesorio y agregarse a los nombres de clase .apply-font . Ejemplo: if pickerId="main" , use className="apply-font-main"
• families : si solo aparecen fuentes específicas en la lista, especifique sus nombres en una matriz. Valor predeterminado: todas las familias de fuentes
• categories : matriz de categorías de fuentes para incluir en la lista. Valores posibles: "sans-serif", "serif", "display", "handwriting", "monospace" . Valor predeterminado: todas las categorías
• scripts : matriz de scripts que deben incluir las fuentes y que se descargarán en la selección de fuentes. Predeterminado: ["latin"] . Ejemplo: ["latin", "greek", "hebrew"] (ver todos los valores posibles)
• variants : matriz de variantes que deben incluir las fuentes y que se descargarán en la selección de fuentes. Predeterminado: ["regular"] . Ejemplo: ["regular", "italic", "700", "700italic"] (ver todos los valores posibles)
• filter : función que debe evaluar como true para que una fuente se incluya en la lista. Predeterminado: font => true . Ejemplo: if font => font.family.toLowerCase().startsWith("m") , solo las fuentes cuyos nombres comienzan con "m" estarán en la lista
• limit : número máximo de fuentes para mostrar en la lista (se omitirán las fuentes menos populares). Valor predeterminado: 50
• sort : Atributo de clasificación para la lista de fuentes. Valores posibles: "alphabet", "popularity" . Valor predeterminado: "alphabet"

Actualmente, solo los accesorios activeFontFamily , onChange y sort son reactivos.

Desarrollo

Requisitos: node.js, hilo

1. Clon este repositorio: git clone REPO_URL
2. Instale todas las dependencias: yarn
3. Genere el paquete de la biblioteca: yarn start
4. Ver el componente renderizado en localhost:3000

¡Las sugerencias y las contribuciones son siempre bienvenidas! Discuta los cambios más grandes a través del tema antes de enviar una solicitud de extracción.