react typesetting
v0.3.1
React Composants pour créer des conceptions magnifiquement composées.
Démo!
import { TightenText } from 'react-typesetting' ; Resserve word-spacing , letter-spacing et font-size (dans cet ordre) par la quantité minimale nécessaire pour garantir un nombre minimal de lignes enveloppées et de débordement.
L'algorithme commence par définir le minimum de toutes les valeurs (définies par les accessoires minWordSpacing , minLetterSpacing et minFontSize ) pour déterminer si l'ajustement cela entraînera moins de lignes enveloppées ou moins de débordement. Si c'est le cas, une recherche binaire est effectuée (avec au plus maxIterations ) pour trouver le meilleur ajustement.
Par défaut, les redimensions des éléments qui peuvent nécessiter de réaménager le texte sont automatiquement détectées. En spécifiant l'hélice reflowKey , vous pouvez plutôt prendre le contrôle manuel en modifiant l'hélice chaque fois que vous souhaitez que le composant se mette à jour.
Notez que contrairement au texte justifié typique, les ajustements d'ajustement doivent s'appliquer à toutes les lignes du texte, et pas seulement les lignes qui doivent être resserrées, car il n'y a aucun moyen de cibler les lignes emballées individuelles. Ainsi, ce composant est mieux utilisé avec parcimonie pour les courtes séries de texte typographiquement importantes, comme les titres ou les étiquettes.
| Nom | Taper | Défaut | Description | |
|---|---|---|---|---|
| nom de classe | Chaîne | La classe à s'appliquer à la | ||
| style | Objet | Propriétés de style supplémentaire à ajouter à la | ||
| enfants | Nœud | Le contenu à rendre. | ||
| MinwordSpacing | Nombre | -0,02 | Espacement des mots minimum dans EMS. Réglez ceci sur 0 si l'espacement des mots ne doit pas être ajusté. | |
| dépouillement de minletters | Nombre | -0,02 | Espacement minimum de lettres dans EMS. Réglez ceci sur 0 si l'espacement des mots ne doit pas être ajusté. | |
| minfontize | Nombre | 0,97 | | |
| maxitations | Nombre | 5 | Lorsque vous effectuez une recherche binaire pour trouver la valeur optimale de chaque propriété CSS, cela définit le nombre maximum d'itérations à exécuter avant de se régler sur une valeur. | |
| reflux | Un de… Nombre Chaîne | Si spécifié, désactive le reflux automatique afin que vous puissiez le déclencher manuellement en modifiant cette valeur. L'hélice elle-même ne fait rien, mais le changement entraînera React pour mettre à jour le composant. | ||
| refluxtimeout | Nombre | Débouche la reflux, donc ils se produisent au plus souvent en millisecondes (à la fin de la durée donnée). Si ce n'est pas spécifié, Reflow est calculé chaque fois que le composant est rendu. | ||
| désactivé | Booléen | S'il faut désactiver complètement le réaménagement du texte. Tout ajustement d'ajustement qui a déjà été appliqué dans un rendu précédent sera conservé. | ||
| onreflow | Fonction | Une fonction à appeler lorsque la mise en page a été recomputée et que le texte est réalisé. | ||
| prérégler | Chaîne | Le nom d'un préréglage défini dans une composante | ||
import { PreventWidows } from 'react-typesetting' ;Empêche les veuves en mesurant la largeur de la dernière ligne de texte rendue par les enfants du composant. Les espaces seront convertis en espaces non révolutionnaires jusqu'à ce que la largeur minimale donnée ou le nombre maximum de substitutions soit atteint.
Par défaut, les redimensions des éléments qui peuvent nécessiter des largeurs de ligne de récomposition sont automatiquement détectées. En spécifiant l'hélice reflowKey , vous pouvez plutôt prendre le contrôle manuel en modifiant l'hélice chaque fois que vous souhaitez que le composant se mette à jour.
| Nom | Taper | Défaut | Description | |
|---|---|---|---|---|
| nom de classe | Chaîne | La classe à s'appliquer à la | ||
| style | Objet | Propriétés de style supplémentaire à ajouter à la | ||
| enfants | Nœud | Le contenu à rendre. | ||
| maxsubstitutions | Nombre | 3 | Le nombre maximum d'espaces à remplacer. | |
| minlinewidth | Un de… Nombre Chaîne Fonction | 15% | La largeur minimale de la dernière ligne, en dessous desquelles les espaces non révolutionnaires seront insérés jusqu'à ce que le minimum soit atteint.
| |
| nbspchar | Un de… Chaîne Élément de réaction Fonction | u00A0 | Un caractère ou un élément à utiliser lors de la substitution des espaces. Par défaut, un personnage d'espace non révolutionnaire standard, avec lequel vous devriez presque certainement vous en tenir à moins que vous souhaitiez visualiser où les espaces non révolutionnaires sont insérés à des fins de débogage, ou ajuster leur largeur.
| |
| reflux | Un de… Nombre Chaîne | Si spécifié, désactive le reflux automatique afin que vous puissiez le déclencher manuellement en modifiant cette valeur. L'hélice elle-même ne fait rien, mais le changement entraînera React pour mettre à jour le composant. | ||
| refluxtimeout | Nombre | Débouche la reflux, donc ils se produisent au plus souvent en millisecondes (à la fin de la durée donnée). Si ce n'est pas spécifié, Reflow est calculé chaque fois que le composant est rendu. | ||
| désactivé | Booléen | S'il faut désactiver complètement la prévention de la veuve. | ||
| onreflow | Fonction | Une fonction à appeler lorsque la mise en page a été recomputée et que la substitution d'espace est effectuée. | ||
| prérégler | Chaîne | Le nom d'un préréglage défini dans une composante | ||
import { Justify } from 'react-typesetting' ; Bien que cela puisse inclure des fonctionnalités de justification plus avancées à l'avenir, il est actuellement très simple: il applique conditionnellement text-align: justify à son élément de conteneur (un <p> par défaut) selon qu'il y a ou non suffisamment de place pour éviter les grandes lacunes de mots imprenables. La largeur minimale est définie par minWidth et est par défaut à 16 EMS.
Vous pouvez également y parvenir avec des requêtes multimédias, mais ce composant peut déterminer la largeur exacte disponible pour l'élément de conteneur au lieu de la page entière.
| Nom | Taper | Défaut | Description | |
|---|---|---|---|---|
| nom de classe | Chaîne | La classe à s'appliquer à l'élément de wrapper extérieur créé par ce composant. | ||
| style | Objet | Propriétés de style supplémentaire à ajouter à l'élément de wrapper extérieur créé par ce composant. | ||
| enfants | Nœud | Le contenu à rendre. | ||
| comme | Un de… Chaîne Fonction Objet | p | Le type d'élément dans lequel rendre les enfants fournis. Il doit s'agir d'un élément de niveau de bloc, comme | |
| minewidth | Un de… Nombre Chaîne | 16EM | La largeur minimale à laquelle permettre le texte justifié. Les nombres indiquent une largeur de pixel absolu. Des chaînes seront appliquées au CSS d'un élément afin d'effectuer le calcul de la largeur. | |
| ajuster initial | Booléen | vrai | Si vous définissez ou non définir initialement | |
| reflux | Un de… Nombre Chaîne | Si spécifié, désactive le reflux automatique afin que vous puissiez le déclencher manuellement en modifiant cette valeur. L'hélice elle-même ne fait rien, mais le changement entraînera React pour mettre à jour le composant. | ||
| refluxtimeout | Nombre | Débouche la reflux, donc ils se produisent au plus souvent en millisecondes (à la fin de la durée donnée). Si ce n'est pas spécifié, Reflow est calculé chaque fois que le composant est rendu. | ||
| désactivé | Booléen | S'il faut désactiver complètement la détection de justification. Le dernier alignement appliqué sera conservé. | ||
| onreflow | Fonction | Une fonction à appeler lorsque la mise en page a été recomputée et que la justification a été appliquée ou non appliquée. | ||
| prérégler | Chaîne | Le nom d'un préréglage défini dans une composante | ||
import { FontObserver } from 'react-typesetting' ; Un composant pour observer les polices spécifiées dans le composant FontObserver.Provider .
| Nom | Taper | Défaut | Description | |
|---|---|---|---|---|
| enfants | Fonction | Une fonction qui recevra l'état actuel des polices observées. L'argument sera un objet avec ces propriétés:
| ||
import { FontObserver } from 'react-typesetting' ;Un fournisseur de contexte pour spécifier les polices à observer.
| Nom | Taper | Défaut | Description | |
|---|---|---|---|---|
| polices | Tableau de… Un de… Chaîne Objet 1 | Les polices à charger et à observer. Les fichiers de police eux-mêmes doivent déjà être spécifiés quelque part (dans CSS), ce composant utilise simplement Chaque élément du tableau spécifie la | ||
| 1 objet | ||||
| famille | Chaîne | |||
| poids | Un de… Nombre Chaîne | |||
| style | Chaîne | |||
| extensible | Chaîne | |||
| test | Chaîne | |||
| temps mort | Nombre | |||
| test | Chaîne | Une chaîne de test personnalisée à passer à la méthode | ||
| temps mort | Nombre | Un délai d'attente personnalisé en millisecondes pour passer à la méthode | ||
| enfants | Nœud | Le contenu qui aura accès à l'état de chargement des polices via le contexte. | ||
import { Typesetting } from 'react-typesetting' ; Un fournisseur de contexte pour définir les préréglages pour tous les autres composants react-typesetting à utiliser.
| Nom | Taper | Défaut | Description | |
|---|---|---|---|---|
| préréglages | Objet | {} | Un objet mappant des noms prédéfinis en accessoires par défaut. Par exemple, étant donné la valeur: { myPreset : { minFontSize : 1 , maxIterations : 3 } } … Le composant < TightenText preset = "myPreset" /> | |
| enfants | Nœud | Le contenu qui aura accès aux préréglages définis via le contexte. | ||
