react typesetting
v0.3.1
反應組件用於創建精美的排版設計。
演示！
import { TightenText } from 'react-typesetting' ;收緊word-spacing ， letter-spacing和font-size （按照順序），以確保最少數量的包裝線和溢出所需的最低量。
該算法首先設置所有值的最小值（由minWordSpacing ， minLetterSpacing和minFontSize Props定義），以確定調整這些值是否會導致包裝線更少或更少的溢出。如果是這樣，則（最多maxIterations ）進行二進制搜索以找到最佳擬合。
默認情況下，會自動檢測到可能需要重新審查文本的元素調整大小。通過指定reflowKey Prop，您可以在需要更新的組件更新時通過更改道具進行手動控制。
請注意，與典型的合理文本不同，擬合調整必須適用於文本的所有行，而不僅僅是需要擰緊的線，因為沒有辦法針對單個包裝線。因此，該組件最多可用於印刷上重要的文本短運行，例如標題或標籤。
| 姓名 | 類型 | 預設 | 描述 | |
|---|---|---|---|---|
| className | 細繩 | 該類應用於該組件創建的外包裝 | ||
| 風格 | 目的 | 額外的樣式屬性要添加到該組件創建的外包裝 | ||
| 孩子們 | 節點 | 渲染的內容。 | ||
| minWord -Spacing | 數字 | -0.02 | EMS中的最小單詞間距。如果不應該調整單詞間距，則將其設置為0。 | |
| Minletterspacing | 數字 | -0.02 | EMS中的最小字母間距。如果不應該調整單詞間距，則將其設置為0。 | |
| minfontsize | 數字 | 0.97 | EMS中的最小 | |
| 最大值 | 數字 | 5 | 當執行二進制搜索以找到每個CSS屬性的最佳值時，這將設置最大的迭代次數，然後在下調一個值之前運行。 | |
| 回流 | 之一… 數字 細繩 | 如果指定，請禁用自動回流，以便可以通過更改此值手動觸發它。道具本身無濟於事，但更改它會導致反應以更新組件。 | ||
| ReflowTimeOut | 數字 | 辯論會反彈，因此它們通常以毫秒（在給定持續時間結束時）進行。如果未指定，則每次渲染組件時都會計算回流。 | ||
| 禁用 | 布爾 | 是否要完全禁用改裝文本。將保留在先前渲染中已應用的任何擬合調整。 | ||
| OnReflow | 功能 | 重新計算佈局並完成文本進行改裝後要調用的功能。 | ||
| 預設 | 細繩 | 在外 | ||
import { PreventWidows } from 'react-typesetting' ;通過測量組件孩子呈現的最後一行文本的寬度來防止寡婦。空間將轉換為非斷裂空間，直到達到給定的最小寬度或最大替換次數為止。
默認情況下，元素調整可能需要自動檢測到可能需要重新計算線寬度的元素。通過指定reflowKey Prop，您可以在需要更新的組件更新時通過更改道具進行手動控制。
| 姓名 | 類型 | 預設 | 描述 | |
|---|---|---|---|---|
| className | 細繩 | 該類應用於該組件創建的外包裝 | ||
| 風格 | 目的 | 額外的樣式屬性要添加到該組件創建的外包裝 | ||
| 孩子們 | 節點 | 渲染的內容。 | ||
| MaxSubStations | 數字 | 3 | 最大替代空間數量。 | |
| MinlineWidth | 之一… 數字 細繩 功能 | 15％ | 最後一行的最小寬度（下方）將插入非破壞空間，直到滿足最小值為止。
| |
| NBSPCHAR | 之一… 細繩 反應元素 功能 | u00A0 | 替換空間時要使用的字符或元素。默認為標準的非破壞空間字符，除非您想可視化在何處插入非破壞空間以進行調試目的或調整其寬度，否則您幾乎應該堅持使用。
| |
| 回流 | 之一… 數字 細繩 | 如果指定，請禁用自動回流，以便可以通過更改此值手動觸發它。道具本身無濟於事，但更改它會導致反應以更新組件。 | ||
| ReflowTimeOut | 數字 | 辯論會反彈，因此它們通常以毫秒（在給定持續時間結束時）進行。如果未指定，則每次渲染組件時都會計算回流。 | ||
| 禁用 | 布爾 | 是否完全禁用寡婦預防。 | ||
| OnReflow | 功能 | 重新計算佈局並完成空間替換後要調用的功能。 | ||
| 預設 | 細繩 | 在外 | ||
import { Justify } from 'react-typesetting' ;儘管這可能包括將來更高級的理由功能，但目前非常簡單：它有條件地應用text-align: justify根據是否有足夠的空間避免較大的，不明顯的<p>差距。最小寬度由minWidth定義，默認值為16 EMS。
您可能還可以通過媒體查詢來完成此操作，但是此組件可以確定容器元素可用的確切寬度，而不僅僅是整個頁面。
| 姓名 | 類型 | 預設 | 描述 | |
|---|---|---|---|---|
| className | 細繩 | 該類應用於該組件創建的外部包裝元素。 | ||
| 風格 | 目的 | 額外的樣式屬性要添加到該組件創建的外部包裝元素中。 | ||
| 孩子們 | 節點 | 渲染的內容。 | ||
| 作為 | 之一… 細繩 功能 目的 | p | 渲染提供兒童的元素類型。它必須是塊級元素，例如 | |
| 最小 | 之一… 數字 細繩 | 16em | 允許合理文本的最小寬度。數字表示絕對像素寬度。字符串將應用於元素的CSS，以執行寬度計算。 | |
| 初始justify | 布爾 | 真的 | 是否最初設置 | |
| 回流 | 之一… 數字 細繩 | 如果指定，請禁用自動回流，以便可以通過更改此值手動觸發它。道具本身無濟於事，但更改它會導致反應以更新組件。 | ||
| ReflowTimeOut | 數字 | 辯論會反彈，因此它們通常以毫秒（在給定持續時間結束時）進行。如果未指定，則每次渲染組件時都會計算回流。 | ||
| 禁用 | 布爾 | 是否要完全禁用理由檢測。應用的最後一個對齊將保留。 | ||
| OnReflow | 功能 | 重新計算佈局時要調用的函數，並且已應用或未應用理由。 | ||
| 預設 | 細繩 | 在外 | ||
import { FontObserver } from 'react-typesetting' ;一個用於觀察FontObserver.Provider組件中指定字體的組件。
| 姓名 | 類型 | 預設 | 描述 | |
|---|---|---|---|---|
| 孩子們 | 功能 | 將接收觀察到的字體的當前狀態的函數。該參數將是具有這些屬性的對象：
| ||
import { FontObserver } from 'react-typesetting' ;上下文提供商，用於指定要觀察的字體。
| 姓名 | 類型 | 預設 | 描述 | |
|---|---|---|---|---|
| 字體 | 一系列… 之一… 細繩 對象1 | 字體可加載和觀察。字體文件本身應該已經在某個地方（在CSS中）指定，此組件只需使用 陣列中的每個項目都指定字體 | ||
| 1對象 | ||||
| 家庭 | 細繩 | |||
| 重量 | 之一… 數字 細繩 | |||
| 風格 | 細繩 | |||
| 拉緊 | 細繩 | |||
| 測試串 | 細繩 | |||
| 暫停 | 數字 | |||
| 測試串 | 細繩 | 一個自定義測試字符串將傳遞到 | ||
| 暫停 | 數字 | 以毫秒為單位的自定義超時，以傳遞到 | ||
| 孩子們 | 節點 | 可以通過上下文訪問字體加載狀態的內容。 | ||
import { Typesetting } from 'react-typesetting' ;一個上下文提供商，用於定義所有其他react-typesetting組件要使用的預設。
| 姓名 | 類型 | 預設 | 描述 | |
|---|---|---|---|---|
| 預設 | 目的 | {} | 對象映射預設名稱為默認道具。例如，給定值： { myPreset : { minFontSize : 1 , maxIterations : 3 } } … < TightenText preset = "myPreset" /> | |
| 孩子們 | 節點 | 可以通過上下文訪問定義的預設的內容。 | ||
