react typesetting

❧反应类型☙

反应组件用于创建精美的排版设计。

演示！

---

配x这个项目是高度实验性的。自行使用！

目录

• 成分
  • thrintentext
    • 道具
  • 预防窗
    • 道具
  • 证明合法
    • 道具
  • fontobserver
    • 道具
  • fontobserver.provider
    • 道具
  • 排版
    • 道具

成分

thrintentext

 import { TightenText } from 'react-typesetting' ;

收紧word-spacing ， letter-spacing和font-size （按照顺序），以确保最少数量的包装线和溢出所需的最低量。

该算法首先设置所有值的最小值（由minWordSpacing ， minLetterSpacing和minFontSize Props定义），以确定调整这些值是否会导致包装线更少或更少的溢出。如果是这样，则（最多maxIterations ）进行二进制搜索以找到最佳拟合。

默认情况下，会自动检测到可能需要重新审查文本的元素调整大小。通过指定reflowKey Prop，您可以在需要更新的组件更新时通过更改道具进行手动控制。

请注意，与典型的合理文本不同，拟合调整必须适用于文本的所有行，而不仅仅是需要拧紧的线，因为没有办法针对单个包装线。因此，该组件最多可用于印刷上重要的文本短运行，例如标题或标签。

道具

姓名	类型		默认	描述
className	细绳			该类应用于该组件创建的外包装span 。
风格	目的			额外的样式属性要添加到该组件创建的外包装span 。
孩子们	节点			渲染的内容。
minWord -Spacing	数字		-0.02	EMS中的最小单词间距。如果不应该调整单词间距，则将其设置为0。
Minletterspacing	数字		-0.02	EMS中的最小字母间距。如果不应该调整单词间距，则将其设置为0。
minfontsize	数字		0.97	EMS中的最小font-size 。如果不应调整字体大小，则将其设置为1。
最大值	数字		5	当执行二进制搜索以找到每个CSS属性的最佳值时，这将设置最大的迭代次数，然后在下调一个值之前运行。
回流	之一… 数字 细绳			如果指定，请禁用自动回流，以便可以通过更改此值手动触发它。道具本身无济于事，但更改它会导致反应以更新组件。
ReflowTimeOut	数字			辩论会反弹，因此它们通常以毫秒（在给定持续时间结束时）进行。如果未指定，则每次渲染组件时都会计算回流。
禁用	布尔			是否要完全禁用改装文本。将保留在先前渲染中已应用的任何拟合调整。
OnReflow	功能			重新计算布局并完成文本进行改装后要调用的功能。
预设	细绳			在外Typesetting.Provider中定义的预设的名称。如果存在，所有其他道具的默认值将来自指定的预设。

预防窗

 import { PreventWidows } from 'react-typesetting' ;

通过测量组件孩子呈现的最后一行文本的宽度来防止寡妇。空间将转换为非断裂空间，直到达到给定的最小宽度或最大替换次数为止。

默认情况下，元素调整可能需要自动检测到可能需要重新计算线宽度的元素。通过指定reflowKey Prop，您可以在需要更新的组件更新时通过更改道具进行手动控制。

道具

姓名	类型		默认	描述
className	细绳			该类应用于该组件创建的外包装span 。
风格	目的			额外的样式属性要添加到该组件创建的外包装span 。
孩子们	节点			渲染的内容。
MaxSubStations	数字		3	最大替代空间数量。
MinlineWidth	之一… 数字 细绳 功能		15％	最后一行的最小宽度（下方）将插入非破坏空间，直到满足最小值为止。 数字表示绝对像素宽度。 字符串表示CSS width值，该值将通过将元素注入容器并确定其宽度来计算。 将使用相关数据调用功能，以确定要返回的动态数字或字符串值。例如，可以使用这在不同的断点上具有不同的规则 - 例如媒体查询。
NBSPCHAR	之一… 细绳 反应元素 功能		u00A0	替换空间时要使用的字符或元素。默认为标准的非破坏空间字符，除非您想可视化在何处插入非破坏空间以进行调试目的或调整其宽度，否则您几乎应该坚持使用。 字符串值将直接插入包含空间的现有文本节点。 反应元件值将渲染到内存中的“孵化器”节点中，然后移植到DOM中，将发现空间的文本节点分开。 函数值必须产生字符串，文本节点，元素节点或反应元素才能插入。
回流	之一… 数字 细绳			如果指定，请禁用自动回流，以便可以通过更改此值手动触发它。道具本身无济于事，但更改它会导致反应以更新组件。
ReflowTimeOut	数字			辩论会反弹，因此它们通常以毫秒（在给定持续时间结束时）进行。如果未指定，则每次渲染组件时都会计算回流。
禁用	布尔			是否完全禁用寡妇预防。
OnReflow	功能			重新计算布局并完成空间替换后要调用的功能。
预设	细绳			在外Typesetting.Provider中定义的预设的名称。如果存在，所有其他道具的默认值将来自指定的预设。

证明合法

 import { Justify } from 'react-typesetting' ;

尽管这可能包括将来更高级的理由功能，但目前非常简单：它有条件地应用text-align: justify根据是否有足够的空间避免较大的，不明显的<p>差距。最小宽度由minWidth定义，默认值为16 EMS。

您可能还可以通过媒体查询来完成此操作，但是此组件可以确定容器元素可用的确切宽度，而不仅仅是整个页面。

道具

姓名	类型		默认	描述
className	细绳			该类应用于该组件创建的外部包装元素。
风格	目的			额外的样式属性要添加到该组件创建的外部包装元素中。
孩子们	节点			渲染的内容。
作为	之一… 细绳 功能 目的		p	渲染提供儿童的元素类型。它必须是块级元素，例如p或div ，因为text-align对内联元素没有影响。只要它使用forwardRef ，它也可能是自定义的反应组件。
最小	之一… 数字 细绳		16em	允许合理文本的最小宽度。数字表示绝对像素宽度。字符串将应用于元素的CSS，以执行宽度计算。
初始justify	布尔		真的	是否最初设置text-align: justify 。
回流	之一… 数字 细绳			如果指定，请禁用自动回流，以便可以通过更改此值手动触发它。道具本身无济于事，但更改它会导致反应以更新组件。
ReflowTimeOut	数字			辩论会反弹，因此它们通常以毫秒（在给定持续时间结束时）进行。如果未指定，则每次渲染组件时都会计算回流。
禁用	布尔			是否要完全禁用理由检测。应用的最后一个对齐将保留。
OnReflow	功能			重新计算布局时要调用的函数，并且已应用或未应用理由。
预设	细绳			在外Typesetting.Provider中定义的预设的名称。如果存在，所有其他道具的默认值将来自指定的预设。

fontobserver

 import { FontObserver } from 'react-typesetting' ;

一个用于观察FontObserver.Provider组件中指定字体的组件。

道具

姓名	类型		默认	描述
孩子们	功能			将接收观察到的字体的当前状态的函数。该参数将是具有这些属性的对象： fonts ：字体的数组传递给FontObserver.Provider ，每个字体都带有loaded和error属性。 loaded ：是否所有观察到的字体都完成了加载。 error ：如果任何字体未能加载，则将使用第一个错误填充。

fontobserver.provider

 import { FontObserver } from 'react-typesetting' ;

上下文提供商，用于指定要观察的字体。

道具

姓名	类型		默认	描述
字体	一系列… 之一… 细绳 对象1			字体可加载和观察。字体文件本身应该已经在某个地方（在CSS中）指定，此组件只需使用FontFaceObserver迫使它们加载（如有必要）并在准备就绪时观察它们。 阵列中的每个项目都指定字体family ， weight ， style和stretch ，只需要family 。此外，如果应该与默认值不同，则每个项目都可以包含该字体的自定义testString和timeout 。如果只需要姓氏，则数组项可以是字符串。
	1对象
	家庭	细绳
	重量	之一… 数字 细绳
	风格	细绳
	拉紧	细绳
	测试串	细绳
	暂停	数字
测试串	细绳			一个自定义测试字符串将传递到FontFaceObserver的load方法，用于所有未指定自己的testString的字体。
暂停	数字			以毫秒为单位的自定义超时，以传递到FontFaceObserver的load方法，用于所有未指定其timeout字体。
孩子们	节点			可以通过上下文访问字体加载状态的内容。

排版

 import { Typesetting } from 'react-typesetting' ;

一个上下文提供商，用于定义所有其他react-typesetting组件要使用的预设。

道具

姓名	类型		默认	描述
预设	目的		{}	对象映射预设名称为默认道具。例如，给定值： { myPreset : { minFontSize : 1 , maxIterations : 3 } } … TightenText组件可以通过指定preset道具来使用此预设： < TightenText preset = "myPreset" />
孩子们	节点			可以通过上下文访问定义的预设的内容。