<div align="center">
npm install react-typesetting:warning: This project is highly experimental. Use at your own risk!
- Components
* TightenText
+ Props
* PreventWidows
+ Props
* Justify
+ Props
* FontObserver
+ Props
* FontObserver.Provider
+ Props
* Typesetting.Provider
+ Props
``js`
import { TightenText } from 'react-typesetting';
Tightens word-spacing, letter-spacing, and font-size (in that order)
by the minimum amount necessary to ensure a minimal number of wrapped lines
and overflow.
The algorithm starts by setting the minimum of all values (defined by the
minWordSpacing, minLetterSpacing, and minFontSize props) to determinemaxIterations
whether adjusting these will result in fewer wrapped lines or less overflow.
If so, then a binary search is performed (with at most ) to
find the best fit.
By default, element resizes that may necessitate refitting the text are
automatically detected. By specifying the reflowKey prop, you can instead
take manual control by changing the prop whenever you’d like the component to
update.
Note that unlike with typical justified text, the fit adjustments must apply
to all lines of the text, not just the lines that need to be tightened,
because there is no way to target individual wrapped lines. Thus, this
component is best used sparingly for typographically important short runs
of text, like titles or labels.
#### Props
| Name | Type | Default | Description | |
|---|---|---|---|---|
| className | String | The class to apply to the outer wrapper span | ||
| style | Object | Extra style properties to add to the outer wrapper span | ||
| children | Node | The content to render. | ||
| minWordSpacing | Number | -0.02 | Minimum word spacing in ems. Set this to 0 if word spacing should not be | |
| minLetterSpacing | Number | -0.02 | Minimum letter spacing in ems. Set this to 0 if word spacing should not | |
| minFontSize | Number | 0.97 | Minimum font-size | |
| maxIterations | Number | 5 | When performing a binary search to find the optimal value of each CSS | |
| reflowKey | One of… Number String | If specified, disables automatic reflow so that you can trigger it | ||
| reflowTimeout | Number | Debounces reflows so they happen at most this often in milliseconds (at | ||
| disabled | Boolean | Whether to completely disable refitting the text. Any fit adjustments | ||
| onReflow | Function | A function to call when layout has been recomputed and the text is done | ||
| preset | String | The name of a preset defined in an outer Typesetting.Provider | ||
`js`
import { PreventWidows } from 'react-typesetting';
Prevents widows
by measuring the width of the last line of text rendered by the component’s
children. Spaces will be converted to non-breaking spaces until the given
minimum width or the maximum number of substitutions is reached.
By default, element resizes that may necessitate recomputing line widths are
automatically detected. By specifying the reflowKey prop, you can instead
take manual control by changing the prop whenever you’d like the component to
update.
#### Props
| Name | Type | Default | Description | |
|---|---|---|---|---|
| className | String | The class to apply to the outer wrapper span | ||
| style | Object | Extra style properties to add to the outer wrapper span | ||
| children | Node | The content to render. | ||
| maxSubstitutions | Number | 3 | The maximum number of spaces to substitute. | |
| minLineWidth | One of… Number String Function | 15% | The minimum width of the last line, below which non-breaking spaces will * Numbers indicate an absolute pixel width. | |
| nbspChar | One of… String React Element Function | \u00A0 | A character or element to use when substituting spaces. Defaults to a * String values will be inserted directly into the existing Text node | |
| reflowKey | One of… Number String | If specified, disables automatic reflow so that you can trigger it | ||
| reflowTimeout | Number | Debounces reflows so they happen at most this often in milliseconds (at | ||
| disabled | Boolean | Whether to completely disable widow prevention. | ||
| onReflow | Function | A function to call when layout has been recomputed and space substitution | ||
| preset | String | The name of a preset defined in an outer Typesetting.Provider | ||
`js`
import { Justify } from 'react-typesetting';
While this may include more advanced justification features in the future, it
is currently very simple: it conditionally applies text-align: justify to
its container element (a
by default) depending on whether or not thereminWidth
is enough room to avoid large, unseemly word gaps. The minimum width is
defined by and defaults to 16 ems.
You might also accomplish this with media queries, but this component can
determine the exact width available to the container element instead of just
the entire page.
#### Props
| Name | Type | Default | Description | |
|---|---|---|---|---|
| className | String | The class to apply to the outer wrapper element created by this | ||
| style | Object | Extra style properties to add to the outer wrapper element created by | ||
| children | Node | The content to render. | ||
| as | One of… String Function Object | p | The element type in which to render the supplied children. It must be | |
| minWidth | One of… Number String | 16em | The minimum width at which to allow justified text. Numbers indicate an | |
| initialJustify | Boolean | true | Whether or not to initially set text-align: justify | |
| reflowKey | One of… Number String | If specified, disables automatic reflow so that you can trigger it | ||
| reflowTimeout | Number | Debounces reflows so they happen at most this often in milliseconds (at | ||
| disabled | Boolean | Whether to completely disable justification detection. The last | ||
| onReflow | Function | A function to call when layout has been recomputed and justification | ||
| preset | String | The name of a preset defined in an outer Typesetting.Provider | ||
`js`
import { FontObserver } from 'react-typesetting';
A component for observing the fonts specified in the FontObserver.Provider
component.
#### Props
| Name | Type | Default | Description | |
|---|---|---|---|---|
| children | Function | A function that will receive the current status of the observed fonts. - fonts | ||
`js`
import { FontObserver } from 'react-typesetting';
A context provider for specifying which fonts to observe.
#### Props
| Name | Type | Default | Description | |
|---|---|---|---|---|
| fonts | Array of… One of… String Object 1 | The fonts to load and observe. The font files themselves should already Each item in the array specifies the font family | ||
| 1 Object | ||||
| family | String | |||
| weight | One of… Number String | |||
| style | String | |||
| stretch | String | |||
| testString | String | |||
| timeout | Number | |||
| testString | String | A custom test string to pass to the load | ||
| timeout | Number | A custom timeout in milliseconds to pass to the load | ||
| children | Node | The content that will have access to font loading status via context. | ||
`js`
import { Typesetting } from 'react-typesetting';
A context provider for defining presets for all other react-typesetting
components to use.
#### Props
| Name | Type | Default | Description | |
|---|---|---|---|---|
| presets | Object | {} | An object mapping preset names to default props. For example, given the ` …the TightenText ` | |
| children | Node | The content that will have access to the defined presets via context. | ||