react typesetting
v0.3.1
Reagieren Sie Komponenten, um wunderschöne Artenset -Designs zu erstellen.
Demo!
import { TightenText } from 'react-typesetting' ; Zieht word-spacing , letter-spacing und font-size (in dieser Reihenfolge) um den minimalen Betrag, der erforderlich ist, um eine minimale Anzahl von Wickelzeilen und einen Überlauf zu gewährleisten.
Der Algorithmus beginnt mit dem Einstellen des Minimums aller Werte (definiert durch die minWordSpacing , minLetterSpacing und minFontSize -Requisiten), um festzustellen, ob die Anpassung zu weniger verpackten Linien oder weniger Überlauf führt. Wenn ja, wird eine binäre Suche (mit höchsten maxIterations ) durchgeführt, um die beste Passform zu finden.
Standardmäßig wird die Element -Größenänderung, die die Umstellung des Textes erfordert, automatisch erkannt. Indem Sie die reflowKey -Requisite angeben, können Sie stattdessen die manuelle Steuerung übernehmen, indem Sie die Requisite ändern, wenn die Komponente aktualisiert werden soll.
Beachten Sie, dass die Anpassungsanpassungen im Gegensatz zu typischer gerechtfertigter Text auf alle Zeilen des Textes gelten müssen, nicht nur für die Zeilen, die festgezogen werden müssen, da es keine Möglichkeit gibt, einzelne verpackte Linien zu zielen. Daher wird diese Komponente am besten sparsam für typografisch wichtige kurze Textläufe wie Titel oder Etiketten verwendet.
| Name | Typ | Standard | Beschreibung | |
|---|---|---|---|---|
| Klassenname | Saite | Die Klasse für die von dieser Komponente erstellte äußere Wrapper | ||
| Stil | Objekt | Zusätzliche Stileigenschaften, die der von dieser Komponente erstellten äußeren Wrapper | ||
| Kinder | Knoten | Der Inhalt zu rendern. | ||
| Minwordspacing | Nummer | -0.02 | Minimaler Wortabstand in EMS. Stellen Sie dies auf 0 ein, wenn der Wortabstand nicht eingestellt werden sollte. | |
| Minletterspazierungen | Nummer | -0.02 | Mindestbuchstaben in EMS. Stellen Sie dies auf 0 ein, wenn der Wortabstand nicht eingestellt werden sollte. | |
| Minfontsize | Nummer | 0,97 | Minimale | |
| Maxiterationen | Nummer | 5 | Bei der Durchführung einer binären Suche, um den optimalen Wert jeder CSS -Eigenschaft zu finden, wird die maximale Anzahl von Iterationen festgelegt, die sich für einen Wert entscheiden. | |
| Reflowkey | Einer von… Nummer Saite | Wenn Sie angegeben sind, deaktiviert Sie den automatischen Reflow so, dass Sie ihn manuell auslösen können, indem Sie diesen Wert ändern. Die Requisite selbst tut nichts, aber das Ändern wird dazu führen, dass die Komponente aktualisiert wird. | ||
| ReflowTimeout | Nummer | Die Entladungen reflektieren, so dass sie in Millisekunden (am Ende der gegebenen Dauer) höchstens dies häufig vorkommen. Wenn nicht angegeben, wird der Reflow jedes Mal berechnet, wenn die Komponente gerendert wird. | ||
| deaktiviert | Boolean | Ob Sie den Text vollständig deaktivieren sollen. Alle Anpassungen für Anpassungen, die bereits in einem früheren Render angewendet wurden, werden erhalten. | ||
| Onreflow | Funktion | Eine Funktion zum Aufrufen, wenn das Layout neu berechnet wurde und der Text nachgearbeitet wird. | ||
| Voreinstellung | Saite | Der Name einer voreingestellten voreingestellten in einer äußeren | ||
import { PreventWidows } from 'react-typesetting' ;Verhindert Witwen, indem die Breite der letzten Textlinie von den Kindern der Komponente gemessen wird. Die Leerzeichen werden in nicht bastelnde Räume umgewandelt, bis die angegebene minimale Breite oder die maximale Anzahl von Substitutionen erreicht ist.
Standardmäßig wird die Element -Größenänderung, die eine erneute Berechnung der Linienbreiten erfordern, automatisch erkannt werden. Indem Sie die reflowKey -Requisite angeben, können Sie stattdessen die manuelle Steuerung übernehmen, indem Sie die Requisite ändern, wenn die Komponente aktualisiert werden soll.
| Name | Typ | Standard | Beschreibung | |
|---|---|---|---|---|
| Klassenname | Saite | Die Klasse für die von dieser Komponente erstellte äußere Wrapper | ||
| Stil | Objekt | Zusätzliche Stileigenschaften, die der von dieser Komponente erstellten äußeren Wrapper | ||
| Kinder | Knoten | Der Inhalt zu rendern. | ||
| MaxSubstitutions | Nummer | 3 | Die maximale Anzahl von Räumen zum Ersatz. | |
| Minline -Width | Einer von… Nummer Saite Funktion | 15% | Die minimale Breite der letzten Zeile, unter der sich nicht blockierende Räume einfügen, bis das Minimum erfüllt ist.
| |
| NBSPCHAR | Einer von… Saite Element reagieren Funktion | u00A0 | Ein Zeichen oder ein Element, das beim Ersetzen von Räumen verwendet werden soll. Standardeinstellungen zu einem nicht bahnbrechenden Speichercharakter, mit dem Sie mit ziemlicher Sicherheit festhalten sollten, es sei denn, Sie möchten sich vorstellen, wo nicht blockierte Räume für Debugging-Zwecke eingefügt werden, oder ihre Breite einstellen.
| |
| Reflowkey | Einer von… Nummer Saite | Wenn Sie angegeben sind, deaktiviert Sie den automatischen Reflow so, dass Sie ihn manuell auslösen können, indem Sie diesen Wert ändern. Die Requisite selbst tut nichts, aber das Ändern wird dazu führen, dass die Komponente aktualisiert wird. | ||
| ReflowTimeout | Nummer | Die Entladungen reflektieren, so dass sie in Millisekunden (am Ende der gegebenen Dauer) höchstens dies häufig vorkommen. Wenn nicht angegeben, wird der Reflow jedes Mal berechnet, wenn die Komponente gerendert wird. | ||
| deaktiviert | Boolean | Ob die Witwe Prävention vollständig deaktivieren soll. | ||
| Onreflow | Funktion | Eine Funktion, die aufgerufen werden muss, wenn das Layout neu berechnet wurde und eine Raumsubstitution erfolgt. | ||
| Voreinstellung | Saite | Der Name einer voreingestellten voreingestellten in einer äußeren | ||
import { Justify } from 'react-typesetting' ; Während dies in Zukunft fortgeschrittenere Begründungsfunktionen beinhalten kann, ist es derzeit sehr einfach: Es wird bedingt text-align: justify das Containerelement (eine <p> standardmäßig), je nachdem, ob es genügend Raum gibt, um große, unpassende Wortlücken zu vermeiden oder nicht. Die Mindestbreite wird durch minWidth definiert und stand auf 16 EMS.
Sie können dies auch mit Medienabfragen durchführen. Diese Komponente kann jedoch die genaue Breite des Containerelements anstelle der gesamten Seite bestimmen.
| Name | Typ | Standard | Beschreibung | |
|---|---|---|---|---|
| Klassenname | Saite | Die Klasse, die auf das von dieser Komponente erstellte äußere Wrapper -Element angewendet werden soll. | ||
| Stil | Objekt | Zusätzliche Stileigenschaften, die dem von dieser Komponente erstellten äußeren Wrapper -Element hinzugefügt werden können. | ||
| Kinder | Knoten | Der Inhalt zu rendern. | ||
| als | Einer von… Saite Funktion Objekt | P | Der Elementtyp, in dem die mitgelieferten Kinder gerendert werden können. Es muss ein Blockebene-Element wie | |
| Minwidth | Einer von… Nummer Saite | 16em | Die minimale Breite, bei der gerechtfertigte Text zu ermöglichen. Zahlen geben eine absolute Pixelbreite an. Saiten werden auf das CSS eines Elements angewendet, um die Breitenberechnung durchzuführen. | |
| InitialSjustify | Boolean | WAHR | Ob anfänglich | |
| Reflowkey | Einer von… Nummer Saite | Wenn Sie angegeben sind, deaktiviert Sie den automatischen Reflow so, dass Sie ihn manuell auslösen können, indem Sie diesen Wert ändern. Die Requisite selbst tut nichts, aber das Ändern wird dazu führen, dass die Komponente aktualisiert wird. | ||
| ReflowTimeout | Nummer | Die Entladungen reflektieren, so dass sie in Millisekunden (am Ende der gegebenen Dauer) höchstens dies häufig vorkommen. Wenn nicht angegeben, wird der Reflow jedes Mal berechnet, wenn die Komponente gerendert wird. | ||
| deaktiviert | Boolean | Ob die Begründung vollständig deaktiviert werden soll. Die letzte Ausrichtung, die angewendet wurde, wird erhalten. | ||
| Onreflow | Funktion | Eine Funktion, die aufgerufen werden muss, wenn das Layout neu berechnet wurde und die Rechtfertigung angewendet oder nicht angewendet wurde. | ||
| Voreinstellung | Saite | Der Name einer voreingestellten voreingestellten in einer äußeren | ||
import { FontObserver } from 'react-typesetting' ; Eine Komponente zur Beobachtung der in der FontObserver.Provider -Komponente angegebenen Schriftarten.
| Name | Typ | Standard | Beschreibung | |
|---|---|---|---|---|
| Kinder | Funktion | Eine Funktion, die den aktuellen Status der beobachteten Schriftarten erhält. Das Argument wird ein Objekt mit diesen Eigenschaften sein:
| ||
import { FontObserver } from 'react-typesetting' ;Ein Kontextanbieter zum Angeben, welche Schriftarten zu beobachten sind.
| Name | Typ | Standard | Beschreibung | |
|---|---|---|---|---|
| Schriftarten | Array von… Einer von… Saite Objekt 1 | Die Schriftarten laden und beobachten. Die Schriftdateien selbst sollten bereits irgendwo (in CSS) angegeben werden. Diese Komponente verwendet einfach Jeder Artikel im Array gibt die | ||
| 1 Objekt | ||||
| Familie | Saite | |||
| Gewicht | Einer von… Nummer Saite | |||
| Stil | Saite | |||
| strecken | Saite | |||
| Teststring | Saite | |||
| Time-out | Nummer | |||
| Teststring | Saite | Eine benutzerdefinierte Testzeichenfolge, die an die | ||
| Time-out | Nummer | Eine benutzerdefinierte Zeitüberschreitung in Millisekunden, um an die | ||
| Kinder | Knoten | Der Inhalt, der über einen Kontext auf den Status der Schriftart zugreifen wird. | ||
import { Typesetting } from 'react-typesetting' ; Ein Kontextanbieter zum Definieren von Voreinstellungen für alle anderen zu verwendenden Komponenten react-typesetting .
| Name | Typ | Standard | Beschreibung | |
|---|---|---|---|---|
| Voreinstellungen | Objekt | {} | Ein Objektzuordnung voreingestellter Namen zu Standard -Requisiten. Zum Beispiel angesichts des Wertes: { myPreset : { minFontSize : 1 , maxIterations : 3 } } … Die < TightenText preset = "myPreset" /> | |
| Kinder | Knoten | Der Inhalt, der über einen Kontext auf die definierten Voreinstellungen zugreifen wird. | ||
