react typesetting

❧ Tipo de reacción ☙

Reaccione componentes para crear diseños de bella tipográfica.

¡Manifestación!

---

️ Este proyecto es altamente experimental. ¡Use en su propio riesgo!

Tabla de contenido

• Componentes
  • Texto ajustado
    • Accesorios
  • Prevenir
    • Accesorios
  • Justificar
    • Accesorios
  • Fontobserver
    • Accesorios
  • FONTOBSERVER.PROVEDOR
    • Accesorios
  • Typeset.provider
    • Accesorios

Componentes

Texto ajustado

 import { TightenText } from 'react-typesetting' ;

Apriega word-spacing , letter-spacing y font-size (en ese orden) en la cantidad mínima necesaria para garantizar un número mínimo de líneas y desbordamiento envueltos.

El algoritmo comienza estableciendo el mínimo de todos los valores (definidos por los accesorios minWordSpacing , minLetterSpacing y minFontSize ) para determinar si ajustarlos dará como resultado menos líneas envueltas o menos desbordamiento. Si es así, se realiza una búsqueda binaria (con la mayoría de maxIterations ) para encontrar el mejor ajuste.

Por defecto, el elemento cambia de tamaño que puede requerir reenviar el texto se detectan automáticamente. Al especificar el accesorio reflowKey , puede tomar el control manual cambiando el accesorio siempre que desee que el componente actualice.

Tenga en cuenta que, a diferencia del texto justificado típico, los ajustes de ajuste deben aplicarse a todas las líneas del texto, no solo las líneas que deben ser apretadas, porque no hay forma de dirigir las líneas envueltas individuales. Por lo tanto, este componente se usa mejor con moderación para rutas cortas de texto tipográficamente importantes, como títulos o etiquetas.

Accesorios

Nombre	Tipo		Por defecto	Descripción
nombre de clase	Cadena			La clase se aplicará al span envoltorio externo creado por este componente.
estilo	Objeto			Propiedades de estilo adicional para agregar al span envoltorio exterior creado por este componente.
niños	Nodo			El contenido de renderizar.
Minwordspacing	Número		-0.02	Espacio mínimo de palabras en EMS. Establezca esto en 0 si el espacio de palabras no debe ajustarse.
mínimo	Número		-0.02	Espaciado mínimo de letras en EMS. Establezca esto en 0 si el espacio de palabras no debe ajustarse.
minfontsize	Número		0.97	font-size en EMS. Establezca esto en 1 si el tamaño de la fuente no debe ajustarse.
maxiteraciones	Número		5	Al realizar una búsqueda binaria para encontrar el valor óptimo de cada propiedad CSS, esto establece el número máximo de iteraciones para ejecutarse antes de resolver un valor.
reflocón	Uno de ... Número Cadena			Si se especifica, deshabilite la reflujo automático para que pueda activarlo manualmente cambiando este valor. El accesorio en sí no hace nada, pero cambiarlo hará que React actualice el componente.
reflewtimeut	Número			Desbloquea los reflotes para que ocurran como máximo esto a menudo en milisegundos (al final de la duración dada). Si no se especifica, el reflujo se calcula cada vez que se representa el componente.
desactivado	Booleano			Si a deshabilitar por completo la reenvío del texto. Se conservarán cualquier ajuste de ajuste que ya se haya aplicado en un renderizado anterior.
sobrealimentación	Función			Una función para llamar cuando se ha recomputado el diseño y el texto se ha terminado de reacondicionar.
programar	Cadena			El nombre de un preajuste definido en un componente Typesetting.Provider externa. Si existe, los valores predeterminados para todos los demás accesorios provendrán del preajuste especificado.

Prevenir

 import { PreventWidows } from 'react-typesetting' ;

Previene a las viudas medir el ancho de la última línea de texto prestada por los hijos del componente. Los espacios se convertirán en espacios no rompidos hasta alcanzar el ancho mínimo dado o el número máximo de sustituciones.

Por defecto, el elemento cambia de tamaño que puede requerir la recomputación de anchos de línea se detectan automáticamente. Al especificar el accesorio reflowKey , puede tomar el control manual cambiando el accesorio siempre que desee que el componente actualice.

Accesorios

Nombre	Tipo		Por defecto	Descripción
nombre de clase	Cadena			La clase se aplicará al span envoltorio externo creado por este componente.
estilo	Objeto			Propiedades de estilo adicional para agregar al span envoltorio exterior creado por este componente.
niños	Nodo			El contenido de renderizar.
MaxSubstitutions	Número		3	El número máximo de espacios para sustituir.
ancho minline	Uno de ... Número Cadena Función		15%	El ancho mínimo de la última línea, por debajo del cual se insertarán los espacios no roto hasta que se cumplan el mínimo. Los números indican un ancho de píxel absoluto. Las cadenas indican un valor width CSS que se calculará inyectando temporalmente un elemento en el contenedor y determinando su ancho. Las funciones se llamarán con datos relevantes para determinar un número dinámico o valor de cadena para devolver. Esto se puede usar, por ejemplo, para tener diferentes reglas en diferentes puntos de interrupción, como una consulta de medios.
nbspchar	Uno de ... Cadena Elemento React Función		u00A0	Un carácter o elemento para usar al sustituir espacios. El valor predeterminado a un personaje espacial estándar no roto, con el que seguramente debe quedarse a menos que desee visualizar dónde se insertan espacios no rompedores para fines de depuración, o ajustar su ancho. Los valores de cadena se insertarán directamente en el nodo de texto existente que contiene el espacio. Los valores del elemento React se convertirán en un nodo "incubador" en memoria, luego se trasplantan al DOM, dividiendo el nodo de texto en el que se encontró el espacio. Los valores de la función deben producir una cadena, un nodo de texto, un nodo de elemento o un elemento react para insertar.
reflocón	Uno de ... Número Cadena			Si se especifica, deshabilite la reflujo automático para que pueda activarlo manualmente cambiando este valor. El accesorio en sí no hace nada, pero cambiarlo hará que React actualice el componente.
reflewtimeut	Número			Desbloquea los reflotes para que ocurran como máximo esto a menudo en milisegundos (al final de la duración dada). Si no se especifica, el reflujo se calcula cada vez que se representa el componente.
desactivado	Booleano			Si deshabilitar por completo la prevención de las viudas.
sobrealimentación	Función			Una función para llamar cuando se ha recomputado el diseño y se realiza la sustitución de espacio.
programar	Cadena			El nombre de un preajuste definido en un componente Typesetting.Provider externa. Si existe, los valores predeterminados para todos los demás accesorios provendrán del preajuste especificado.

Justificar

 import { Justify } from 'react-typesetting' ;

Si bien esto puede incluir características de justificación más avanzadas en el futuro, actualmente es muy simple: aplica condicionalmente text-align: justify a su elemento contenedor (a <p> por defecto) dependiendo de si hay suficiente espacio para evitar grandes brechas de palabras indecorosas. El ancho mínimo se define por minWidth y el valor predeterminado a 16 EMS.

También puede lograr esto con consultas de medios, pero este componente puede determinar el ancho exacto disponible para el elemento contenedor en lugar de solo toda la página.

Accesorios

Nombre	Tipo		Por defecto	Descripción
nombre de clase	Cadena			La clase se aplicará al elemento de envoltura exterior creado por este componente.
estilo	Objeto			Propiedades de estilo adicional para agregar al elemento de envoltura exterior creado por este componente.
niños	Nodo			El contenido de renderizar.
como	Uno de ... Cadena Función Objeto		pag	El elemento tipo en el que representar a los niños suministrados. Debe ser un elemento de nivel de bloque, como p o div , ya que text-align no tiene ningún efecto en los elementos en línea. También puede ser un componente React personalizado, siempre que use forwardRef .
mínimo	Uno de ... Número Cadena		16em	El ancho mínimo en el que permitir el texto justificado. Los números indican un ancho de píxel absoluto. Las cadenas se aplicarán al CSS de un elemento para realizar el cálculo de ancho.
inicialjustify	Booleano		verdadero	Si inicialmente establece o no text-align: justify antes de que se haya determinado el ancho disponible.
reflocón	Uno de ... Número Cadena			Si se especifica, deshabilite la reflujo automático para que pueda activarlo manualmente cambiando este valor. El accesorio en sí no hace nada, pero cambiarlo hará que React actualice el componente.
reflewtimeut	Número			Desbloquea los reflotes para que ocurran como máximo esto a menudo en milisegundos (al final de la duración dada). Si no se especifica, el reflujo se calcula cada vez que se representa el componente.
desactivado	Booleano			Si a deshabilitar completamente la detección de justificación. Se conservará la última alineación que se aplicó.
sobrealimentación	Función			Una función para llamar cuando se ha recomputado el diseño y la justificación se ha aplicado o no aplicado.
programar	Cadena			El nombre de un preajuste definido en un componente Typesetting.Provider externa. Si existe, los valores predeterminados para todos los demás accesorios provendrán del preajuste especificado.

Fontobserver

 import { FontObserver } from 'react-typesetting' ;

Un componente para observar las fuentes especificadas en el componente FontObserver.Provider .

Accesorios

Nombre	Tipo		Por defecto	Descripción
niños	Función			Una función que recibirá el estado actual de las fuentes observadas. El argumento será un objeto con estas propiedades: fonts : una matriz de las fuentes pasadas a FontObserver.Provider , cada una con una propiedad de error loaded y error . loaded : si todas las fuentes observadas se realizan cargando. error : si alguna fuente no se cargó, esto se poblará con el primer error.

FONTOBSERVER.PROVEDOR

 import { FontObserver } from 'react-typesetting' ;

Un proveedor de contexto para especificar qué fuentes observar.

Accesorios

Nombre	Tipo		Por defecto	Descripción
fuentes	Matriz de ... Uno de ... Cadena Objeto 1			Las fuentes para cargar y observar. Los archivos de fuentes en sí ya deben especificarse en algún lugar (en CSS), este componente simplemente usa FontFaceObserver para obligarlos a cargar (si es necesario) y observar cuándo están listos. Cada artículo en la matriz especifica la family de fuentes, weight , style y stretch , con solo family requerida. Además, cada elemento puede contener una testString y timeout personalizado para esa fuente, si se diferencian de los valores predeterminados. Si solo se necesita el apellido de la familia, el elemento de la matriz solo puede ser una cadena.
	1 objeto
	familia	Cadena
	peso	Uno de ... Número Cadena
	estilo	Cadena
	estirar	Cadena
	teststring	Cadena
	se acabó el tiempo	Número
teststring	Cadena			Una cadena de prueba personalizada para pasar al método load de FontFaceObserver , que se utilizará para todas las fuentes que no especifican su propia testString .
se acabó el tiempo	Número			Un tiempo de espera personalizado en milisegundos para pasar al método load de FontFaceObserver , para ser utilizado para todas las fuentes que no especifican su propio timeout .
niños	Nodo			El contenido que tendrá acceso al estado de carga de fuentes a través del contexto.

Typeset.provider

 import { Typesetting } from 'react-typesetting' ;

Un proveedor de contexto para definir presets para todos los demás componentes react-typesetting .

Accesorios

Nombre	Tipo		Por defecto	Descripción
preajustes	Objeto		{}	Un objeto Mapeo de nombres preestablecidos a los accesorios predeterminados. Por ejemplo, dado el valor: { myPreset : { minFontSize : 1 , maxIterations : 3 } } ... El componente TightenText podría usar este preajuste especificando el accesorio preset : < TightenText preset = "myPreset" />
niños	Nodo			El contenido que tendrá acceso a los preestablecidos definidos a través del contexto.