font picker react

Picker de fonte para reagir

Um seletor de fonte simples e personalizável, permitindo que os usuários visualizem, selecionem e usem o Google Fontes em seu site.

• Configuração simples
• Sem dependências
• Download automático de fonte e geração dos seletores CSS necessários
• Visualizações de fontes eficientes (fontes completas são baixadas apenas na seleção)

→ Demo

Este é o componente REACT para a biblioteca de seleção de fontes .

Começando

Para poder acessar a API, você precisará gerar uma chave da API do Google Fonts.

1. Configuração

Instale o pacote font-picker-react usando o NPM:

npm install font-picker-react

2. Exibindo o seletor de fontes

Adicione o componente FontPicker ao seu 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 a fonte selecionada

Adicione a classe "apply-font" a todos os elementos JSX aos quais você deseja aplicar a fonte selecionada.

Quando o usuário selecionar uma fonte, ele será baixado automaticamente e aplicado a todos os elementos com a classe "apply-font" .

Adereços

Os seguintes adereços podem ser passados para o componente FontPicker :

• apiKey (NECESSÁRIO) : Chave da API do Google
• activeFontFamily : Fonte que deve ser selecionada no seletor de fontes e aplicada ao texto. Deve ser armazenado no estado do componente e atualizado usando onChange
• onChange : Função que é executada quando o usuário altera a fonte ativa. Esta função deve atualizar activeFontFamily no estado do componente
• pickerId : se você tiver vários catadores de fonte no seu site, precisará fornecer IDs exclusivos que devem ser fornecidos como um suporte e anexado aos nomes de classe .apply-font . Exemplo: Se pickerId="main" , use className="apply-font-main"
• families : Se apenas fontes específicas aparecerem na lista, especifique seus nomes em uma matriz. Padrão: todas as famílias de fontes
• categories : Matriz de categorias de fontes a serem incluídas na lista. Valores possíveis: "sans-serif", "serif", "display", "handwriting", "monospace" . Padrão: todas as categorias
• scripts : Matriz de scripts que as fontes devem incluir e que serão baixadas na seleção de fontes. Padrão: ["latin"] . Exemplo: ["latin", "greek", "hebrew"] (veja todos os valores possíveis)
• variants : Matriz de variantes que as fontes devem incluir e que serão baixadas na seleção de fontes. Padrão: ["regular"] . Exemplo: ["regular", "italic", "700", "700italic"] (veja todos os valores possíveis)
• filter : Função que deve ser true para uma fonte a ser incluída na lista. Padrão: font => true . Exemplo: se font => font.family.toLowerCase().startsWith("m") , apenas fontes cujos nomes começam com "m" estarão na lista
• limit : Número máximo de fontes a serem exibidas na lista (as fontes menos populares serão omitidas). Padrão: 50
• sort : atributo de classificação para a lista de fontes. Valores possíveis: "alphabet", "popularity" . Padrão: "alphabet"

Atualmente, apenas os adereços activeFontFamily , onChange e sort são reativos.

Desenvolvimento

Requisitos: Node.js, Yarn

1. Clone este repositório: git clone REPO_URL
2. Instale todas as dependências: yarn
3. Gere o pacote da biblioteca: yarn start
4. Veja o componente renderizado no localhost:3000

Sugestões e contribuições são sempre bem -vindas! Discuta alterações maiores por meio da questão antes de enviar uma solicitação de tração.