react typesetting

❧ Tipo de reação ☙

Reaja componentes para criar projetos lindamente com tipos.

Demonstração!

---

️ Este projeto é altamente experimental. Use por sua conta e risco!

Índice

• Componentes
  • Aperto
    • Adereços
  • PreventWidows
    • Adereços
  • Justificar
    • Adereços
  • Fontobserver
    • Adereços
  • Fontobserver.provider
    • Adereços
  • Typeetting.provider
    • Adereços

Componentes

Aperto

 import { TightenText } from 'react-typesetting' ;

Aperta word-spacing , letter-spacing e font-size (nessa ordem) pelo valor mínimo necessário para garantir um número mínimo de linhas e transbordamentos embrulhados.

O algoritmo é iniciado definindo o mínimo de todos os valores (definidos pelo minWordSpacing , minLetterSpacing e minFontSize adereços) para determinar se o ajuste isso resultará em menos linhas embrulhadas ou menos transbordamento. Nesse caso, é executada uma pesquisa binária (com a maioria maxIterations ) para encontrar o melhor ajuste.

Por padrão, o elemento é redimensionado que pode exigir a realização do texto é detectado automaticamente. Ao especificar o suporte reflowKey , você pode assumir o controle manual alterando o suporte sempre que desejar que o componente seja atualizado.

Observe que, diferentemente do texto justificado típico, os ajustes de ajuste devem se aplicar a todas as linhas do texto, não apenas das linhas que precisam ser apertadas, porque não há como direcionar linhas envolvidas individuais. Assim, esse componente é melhor usado com moderação para corridas curtas de texto tipograficamente importantes, como títulos ou etiquetas.

Adereços

Nome	Tipo		Padrão	Descrição
ClassName	Corda			A classe a ser aplicada ao span de invólucro externo criado por este componente.
estilo	Objeto			Propriedades de estilo extra para adicionar à span do invólucro externo criado por este componente.
crianças	Nó			O conteúdo para renderizar.
MinWordspacing	Número		-0,02	Espaçamento mínimo de palavras no EMS. Defina isso como 0 se o espaçamento das palavras não for ajustado.
Minletterspacing	Número		-0,02	Espaçamento mínimo de cartas no EMS. Defina isso como 0 se o espaçamento das palavras não for ajustado.
minfontsize	Número		0,97	font-size do EMS. Defina isso como 1 se o tamanho da fonte não for ajustado.
Maxiterations	Número		5	Ao executar uma pesquisa binária para encontrar o valor ideal de cada propriedade CSS, isso define o número máximo de iterações a serem executadas antes de resolver um valor.
reflowkey	Um de ... Número Corda			Se especificado, desativa o refluxo automático para que você possa acioná -lo manualmente alterando esse valor. O próprio Prop não faz nada, mas alterar isso fará com que o React atualize o componente.
reflowtimeout	Número			Debounces reflita para que eles aconteçam no máximo isso geralmente em milissegundos (no final da duração dada). Se não for especificado, o reflexão é calculado toda vez que o componente é renderizado.
desabilitado	Booleano			Se é para desativar completamente o recrutamento do texto. Quaisquer ajustes de ajuste que já foram aplicados em uma renderização anterior serão preservados.
onreflow	Função			Uma função a ser chamada quando o layout foi recalculado e o texto é feito de reforma.
predefinido	Corda			O nome de uma Typesetting.Provider definida em um componente externo. Se existir, os valores padrão para todos os outros adereços virão da predefinição especificada.

PreventWidows

 import { PreventWidows } from 'react-typesetting' ;

Impede as viúvas medindo a largura da última linha de texto renderizada pelos filhos do componente. Os espaços serão convertidos em espaços não quebrantes até que a largura mínima fornecida ou o número máximo de substituições seja atingido.

Por padrão, o elemento redimensiona que podem exigir que as larguras de linha recomputadas sejam detectadas automaticamente. Ao especificar o suporte reflowKey , você pode assumir o controle manual alterando o suporte sempre que desejar que o componente seja atualizado.

Adereços

Nome	Tipo		Padrão	Descrição
ClassName	Corda			A classe a ser aplicada ao span de invólucro externo criado por este componente.
estilo	Objeto			Propriedades de estilo extra para adicionar à span do invólucro externo criado por este componente.
crianças	Nó			O conteúdo para renderizar.
MaxSubstitutions	Número		3	O número máximo de espaços para substituir.
MinLineWidth	Um de ... Número Corda Função		15%	A largura mínima da última linha, abaixo da qual os espaços não quebrantes serão inseridos até que o mínimo seja atendido. Os números indicam uma largura absoluta de pixels. As cadeias indicam um valor de width CSS que será calculado injetando temporariamente um elemento no contêiner e determinando sua largura. As funções serão chamadas com dados relevantes para determinar um número dinâmico ou valor da string para retornar. Isso pode ser usado, por exemplo, para ter regras diferentes em diferentes pontos de interrupção - como uma consulta de mídia.
nbspchar	Um de ... Corda Elemento de reação Função		u00A0	Um personagem ou elemento a ser usado ao substituir espaços. Os padrões de um caractere espacial não quebrativo, com o qual você quase certamente deve permanecer, a menos que queira visualizar onde os espaços não quebrantes estão sendo inseridos para fins de depuração ou ajustar sua largura. Os valores da string serão inseridos diretamente no nó de texto existente que contém o espaço. Os valores do elemento React serão renderizados em um nó "incubadora" na memória e depois transplantados para o DOM, dividindo o nó de texto no qual o espaço foi encontrado. Os valores da função devem produzir uma string, nó de texto, nó de elemento ou elemento react para inserir.
reflowkey	Um de ... Número Corda			Se especificado, desativa o refluxo automático para que você possa acioná -lo manualmente alterando esse valor. O próprio Prop não faz nada, mas alterar isso fará com que o React atualize o componente.
reflowtimeout	Número			Debounces reflita para que eles aconteçam no máximo isso geralmente em milissegundos (no final da duração dada). Se não for especificado, o reflexão é calculado toda vez que o componente é renderizado.
desabilitado	Booleano			Se deve desativar completamente a prevenção de viúvas.
onreflow	Função			Uma função a ser chamada quando o layout foi recalculado e a substituição do espaço é feita.
predefinido	Corda			O nome de uma Typesetting.Provider definida em um componente externo. Se existir, os valores padrão para todos os outros adereços virão da predefinição especificada.

Justificar

 import { Justify } from 'react-typesetting' ;

Embora isso possa incluir recursos de justificativa mais avançados no futuro, atualmente é muito simples: aplica-se condicionalmente text-align: justify ao seu elemento de contêiner (a <p> por padrão), dependendo se há ou não espaço suficiente para evitar lacunas de palavras grandes e indecorosas. A largura mínima é definida por minWidth e padrão para 16 EMS.

Você também pode conseguir isso com consultas de mídia, mas esse componente pode determinar a largura exata disponível para o elemento do contêiner, em vez de apenas a página inteira.

Adereços

Nome	Tipo		Padrão	Descrição
ClassName	Corda			A classe a ser aplicada ao elemento de invólucro externo criado por este componente.
estilo	Objeto			Propriedades de estilo extra para adicionar ao elemento de invólucro externo criado por este componente.
crianças	Nó			O conteúdo para renderizar.
como	Um de ... Corda Função Objeto		p	O tipo de elemento para renderizar as crianças fornecidas. Deve ser um elemento de nível de bloco, como p ou div , pois text-align não tem efeito nos elementos embutidos. Também pode ser um componente de reação personalizado, desde que use forwardRef .
Minwidth	Um de ... Número Corda		16em	A largura mínima para permitir texto justificado. Os números indicam uma largura absoluta de pixels. As cadeias serão aplicadas ao CSS de um elemento para realizar o cálculo da largura.
Initialjustify	Booleano		verdadeiro	Se deverá ou não definir ou não text-align: justify antes que a largura disponível tenha sido determinada.
reflowkey	Um de ... Número Corda			Se especificado, desativa o refluxo automático para que você possa acioná -lo manualmente alterando esse valor. O próprio Prop não faz nada, mas alterar isso fará com que o React atualize o componente.
reflowtimeout	Número			Debounces reflita para que eles aconteçam no máximo isso geralmente em milissegundos (no final da duração dada). Se não for especificado, o reflexão é calculado toda vez que o componente é renderizado.
desabilitado	Booleano			Se deve desativar completamente a detecção de justificativa. O último alinhamento que foi aplicado será preservado.
onreflow	Função			Uma função a ser chamada quando o layout foi recalculada e a justificativa foi aplicada ou não aplicada.
predefinido	Corda			O nome de uma Typesetting.Provider definida em um componente externo. Se existir, os valores padrão para todos os outros adereços virão da predefinição especificada.

Fontobserver

 import { FontObserver } from 'react-typesetting' ;

Um componente para observar as fontes especificadas no componente FontObserver.Provider .

Adereços

Nome	Tipo		Padrão	Descrição
crianças	Função			Uma função que receberá o status atual das fontes observadas. O argumento será um objeto com estas propriedades: fonts : uma matriz das fontes passadas para FontObserver.Provider , cada uma com uma propriedade loaded e error . loaded : se todas as fontes observadas são feitas de carga. error : se alguma fonte falhar no carregamento, isso será preenchido com o primeiro erro.

Fontobserver.provider

 import { FontObserver } from 'react-typesetting' ;

Um provedor de contexto para especificar quais fontes observarem.

Adereços

Nome	Tipo		Padrão	Descrição
fontes	Array de… Um de ... Corda Objeto 1			As fontes para carregar e observar. Os próprios arquivos de fonte já devem ser especificados em algum lugar (no CSS), esse componente simplesmente usa FontFaceObserver para forçá -los a carregar (se necessário) e observar quando estão prontos. Cada item da matriz especifica a family de fontes, weight , style e stretch , com apenas family sendo necessária. Além disso, cada item pode conter um testString personalizado e timeout para essa fonte, se eles diferirem dos padrões. Se apenas o nome da família for necessário, o item da matriz pode ser apenas uma string.
	1 objeto
	família	Corda
	peso	Um de ... Número Corda
	estilo	Corda
	esticar	Corda
	teststring	Corda
	tempo esgotado	Número
teststring	Corda			Uma string de teste personalizada para passar para o método load do FontFaceObserver , a ser usado para todas as fontes que não especificam sua própria testString .
tempo esgotado	Número			Um tempo limite personalizado em milissegundos para passar para o método load do FontFaceObserver , a ser usado para todas as fontes que não especificam seu próprio timeout .
crianças	Nó			O conteúdo que terá acesso ao status de carregamento de fontes via contexto.

Typeetting.provider

 import { Typesetting } from 'react-typesetting' ;

Um provedor de contexto para definir predefinições para todos os outros componentes react-typesetting .

Adereços

Nome	Tipo		Padrão	Descrição
Predefinições	Objeto		{}	Um objeto que mapeia nomes predefinidos para adereços padrão. Por exemplo, dado o valor: { myPreset : { minFontSize : 1 , maxIterations : 3 } } … O componente TightenText poderia usar essa predefinição especificando o suporte preset : < TightenText preset = "myPreset" />
crianças	Nó			O conteúdo que terá acesso às predefinições definidas via contexto.