react fontpicker

react-fonpicker

Um componente seletor de fontes do Google para React.

• Sem dependências (além do React)
• Nenhuma chave de API do Google é necessária
• Mais de 1600 fontes do Google, personalizáveis
• Pré-visualizações de fontes rápidas e de alta qualidade a partir de imagens SVG pré-geradas
• Opcionalmente, carrega automaticamente as fontes

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

Documentação

Uma demonstração ao vivo incluindo o uso está disponível em: https://ae9is.github.io/react-fontpicker/

Instalando

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

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

Em seguida, importe o componente e a folha de estilo:

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

Estilo

Veja nomes de classes css em: packages/fontpicker/src/components/FontPicker.css

Um exemplo de reestilização do seletor de fontes

Um exemplo de integração do seletor de fontes em um aplicativo real: ae9is/uimix

Estrutura do projeto

O projeto do seletor de fontes reside neste monorepo Turborepo em packages/fontpicker/

A demonstração ao vivo é um aplicativo Vite que você pode executar por meio de npm run dev e que é compilado em /docs . Usa tsconfig.json .

O próprio componente do seletor de fontes é compilado via tsup (ou seja, esbuild ) para /dist com definições de tipo geradas via tsc de acordo com tsconfig.types.json .

O script de geração de visualização de fonte baixa arquivos de fonte para /font-cache e cria visualizações de imagens de fonte para /font-preview .

Desempenho

As visualizações do seletor de fontes funcionam carregando arquivos de imagem de visualização de fontes em CSS. As fontes são divididas em vários arquivos de imagem para uma visualização inicial mais rápida.

Assim que a seleção suspensa for aberta, todos os arquivos de imagem de visualização serão recuperados, permitindo rolagem e pesquisa suaves.

Nenhuma solicitação é feita à API de fontes do Google, a menos que o seletor de fontes esteja configurado para carregamento automático. Nesse caso, a fonte atualmente selecionada é anexada ao cabeçalho da página. (O link da fonte selecionada anteriormente não é removido.)

Por exemplo:

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

A grande desvantagem dessa abordagem é que o pacote do componente é bastante grande devido a todas as visualizações de imagens de fontes: 8 MB em imagens SVG compactadas para 1633 fontes. Certifique-se de servir SVGs compactados! Veja aqui um exemplo para Vite.

Se você está procurando uma opção mais leve, você pode usar react-fontpicker-ts-lite que tem cerca de 180 KB.

Ou, para um seletor de fontes diferente seguindo uma abordagem sob demanda, confira: https://github.com/samuelmeuli/font-picker-react

font-picker-react requer uma chave de API do Google e funciona melhor com o limite de fonte padrão de 50 (fontes para escolher).

Construindo visualizações de fontes

Observação: a maioria dos usuários não precisa reconstruir as visualizações de fontes, mas esta seção é incluída por conveniência se você precisar obter as fontes mais recentes ou editar as visualizações.

1. Chave API do Google

Obtenha uma chave de API do Google aqui https://developers.google.com/fonts/docs/developer_api#APIKey e crie um novo arquivo chamado GOOGLE_API_KEY em react-fontpicker/packages/fontpicker/scripts , no mesmo diretório que scripts/buildFontPreviews.ts script.

2. Script de visualização da fonte

Todas as fontes do Google

Para gerar visualizações de fontes para todas as fontes do Google atualmente disponíveis (somente famílias de fontes latinas, menos Kumar One ).

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

Observação: para 1.600 fontes, reserve 20 a 30 minutos e 800 MB para baixar todas as fontes. A compilação das próprias visualizações das imagens deve levar menos de um minuto. Ao ser executado novamente, o script só recupera novas informações de fonte se tiver mais de uma semana e ignora o download de fontes armazenadas em cache.

Fontes personalizadas

Para gerar visualizações de fontes personalizadas, você precisará de algumas informações sobre as fontes e os caminhos para o arquivo de fonte baixado no formato TTF.

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

Onde font-variants-info é uma matriz de valores como 0.400 e 1.700 unidos por +. O primeiro valor denota uma fonte normal (0) ou itálico (1). O segundo valor é o peso da fonte (ou seja, 100 = fino, 400 = normal, 700 = negrito, 900 = pesado).

Por exemplo:

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 "

Veja o script de execução build-font-previews-manual em: packages/fontpicker/package.json

Desenvolvimento

Instalação

Este monorepo usa Turborepo.

Teste

O aplicativo usa Vitest e Cypress para testes. Certifique-se de configurar os pré-requisitos para Cypress em seu sistema.

No Ubuntu:

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