{"id":13571036,"url":"https://github.com/exogen/react-typesetting","last_synced_at":"2025-03-20T03:30:52.050Z","repository":{"id":66096076,"uuid":"86954083","full_name":"exogen/react-typesetting","owner":"exogen","description":"React typesetting components.","archived":false,"fork":false,"pushed_at":"2020-03-05T01:15:57.000Z","size":3217,"stargazers_count":81,"open_issues_count":2,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-16T14:53:57.068Z","etag":null,"topics":["components","react","typesetting","typography"],"latest_commit_sha":null,"homepage":"https://exogen.github.io/react-typesetting/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/exogen.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2017-04-02T01:20:00.000Z","updated_at":"2024-10-15T06:13:30.000Z","dependencies_parsed_at":"2023-04-01T05:36:01.447Z","dependency_job_id":null,"html_url":"https://github.com/exogen/react-typesetting","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/exogen%2Freact-typesetting","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/exogen%2Freact-typesetting/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/exogen%2Freact-typesetting/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/exogen%2Freact-typesetting/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/exogen","download_url":"https://codeload.github.com/exogen/react-typesetting/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244543738,"owners_count":20469552,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["components","react","typesetting","typography"],"created_at":"2024-08-01T14:00:57.768Z","updated_at":"2025-03-20T03:30:51.657Z","avatar_url":"https://github.com/exogen.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n# ❧ react-typesetting ☙\n\nReact components for creating beautifully typeset designs.\n\n**[Demo!](https://exogen.github.io/react-typesetting)**\n\n---\n\n\u003c/div\u003e\n\n:warning: This project is highly experimental. Use at your own risk!\n\n## Table of Contents\n\n\u003c!-- AUTO-GENERATED-CONTENT:START (TOC) --\u003e\n- [Components](#components)\n  * [TightenText](#tightentext)\n    + [Props](#props)\n  * [PreventWidows](#preventwidows)\n    + [Props](#props-1)\n  * [Justify](#justify)\n    + [Props](#props-2)\n  * [FontObserver](#fontobserver)\n    + [Props](#props-3)\n  * [FontObserver.Provider](#fontobserverprovider)\n    + [Props](#props-4)\n  * [Typesetting.Provider](#typesettingprovider)\n    + [Props](#props-5)\n\u003c!-- AUTO-GENERATED-CONTENT:END --\u003e\n\n## Components\n\n\u003c!-- AUTO-GENERATED-CONTENT:START (COMPONENTS) --\u003e\n\n### TightenText\n\n```js\nimport { TightenText } from 'react-typesetting';\n```\n\nTightens `word-spacing`, `letter-spacing`, and `font-size` (in that order)\nby the minimum amount necessary to ensure a minimal number of wrapped lines\nand overflow.\n\nThe algorithm starts by setting the minimum of all values (defined by the\n`minWordSpacing`, `minLetterSpacing`, and `minFontSize` props) to determine\nwhether adjusting these will result in fewer wrapped lines or less overflow.\nIf so, then a binary search is performed (with at most `maxIterations`) to\nfind the best fit.\n\nBy default, element resizes that may necessitate refitting the text are\nautomatically detected. By specifying the `reflowKey` prop, you can instead\ntake manual control by changing the prop whenever you’d like the component to\nupdate.\n\nNote that unlike with typical justified text, the fit adjustments must apply\nto all lines of the text, not just the lines that need to be tightened,\nbecause there is no way to target individual wrapped lines. Thus, this\ncomponent is best used sparingly for typographically important short runs\nof text, like titles or labels.\n\n#### Props\n\n\u003ctable\u003e\n\u003cthead\u003e\n\u003ctr\u003e\n\u003cth\u003eName\u003c/th\u003e\n\u003cth colspan=\"2\"\u003eType\u003c/th\u003e\n\u003cth\u003eDefault\u003c/th\u003e\n\u003cth\u003eDescription\u003c/th\u003e\n\u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd valign=\"top\" rowspan=\"1\"\u003eclassName\u003c/td\u003e\n\u003ctd valign=\"top\" colspan=\"2\"\u003eString\u003c/td\u003e\n\u003ctd valign=\"top\" align=\"right\" rowspan=\"1\"\u003e\u003c/td\u003e\n\u003ctd valign=\"top\" valign=\"top\" rowspan=\"1\"\u003e\n\nThe class to apply to the outer wrapper `span` created by this component.\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd valign=\"top\" rowspan=\"1\"\u003estyle\u003c/td\u003e\n\u003ctd valign=\"top\" colspan=\"2\"\u003eObject\u003c/td\u003e\n\u003ctd valign=\"top\" align=\"right\" rowspan=\"1\"\u003e\u003c/td\u003e\n\u003ctd valign=\"top\" valign=\"top\" rowspan=\"1\"\u003e\n\nExtra style properties to add to the outer wrapper `span` created by this\ncomponent.\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd valign=\"top\" rowspan=\"1\"\u003echildren\u003c/td\u003e\n\u003ctd valign=\"top\" colspan=\"2\"\u003eNode\u003c/td\u003e\n\u003ctd valign=\"top\" align=\"right\" rowspan=\"1\"\u003e\u003c/td\u003e\n\u003ctd valign=\"top\" valign=\"top\" rowspan=\"1\"\u003e\n\nThe content to render.\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd valign=\"top\" rowspan=\"1\"\u003eminWordSpacing\u003c/td\u003e\n\u003ctd valign=\"top\" colspan=\"2\"\u003eNumber\u003c/td\u003e\n\u003ctd valign=\"top\" align=\"right\" rowspan=\"1\"\u003e-0.02\u003c/td\u003e\n\u003ctd valign=\"top\" valign=\"top\" rowspan=\"1\"\u003e\n\nMinimum word spacing in ems. Set this to 0 if word spacing should not be\nadjusted.\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd valign=\"top\" rowspan=\"1\"\u003eminLetterSpacing\u003c/td\u003e\n\u003ctd valign=\"top\" colspan=\"2\"\u003eNumber\u003c/td\u003e\n\u003ctd valign=\"top\" align=\"right\" rowspan=\"1\"\u003e-0.02\u003c/td\u003e\n\u003ctd valign=\"top\" valign=\"top\" rowspan=\"1\"\u003e\n\nMinimum letter spacing in ems. Set this to 0 if word spacing should not\nbe adjusted.\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd valign=\"top\" rowspan=\"1\"\u003eminFontSize\u003c/td\u003e\n\u003ctd valign=\"top\" colspan=\"2\"\u003eNumber\u003c/td\u003e\n\u003ctd valign=\"top\" align=\"right\" rowspan=\"1\"\u003e0.97\u003c/td\u003e\n\u003ctd valign=\"top\" valign=\"top\" rowspan=\"1\"\u003e\n\nMinimum `font-size` in ems. Set this to 1 if font size should not be\nadjusted.\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd valign=\"top\" rowspan=\"1\"\u003emaxIterations\u003c/td\u003e\n\u003ctd valign=\"top\" colspan=\"2\"\u003eNumber\u003c/td\u003e\n\u003ctd valign=\"top\" align=\"right\" rowspan=\"1\"\u003e5\u003c/td\u003e\n\u003ctd valign=\"top\" valign=\"top\" rowspan=\"1\"\u003e\n\nWhen performing a binary search to find the optimal value of each CSS\nproperty, this sets the maximum number of iterations to run before\nsettling on a value.\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd valign=\"top\" rowspan=\"1\"\u003ereflowKey\u003c/td\u003e\n\u003ctd valign=\"top\" colspan=\"2\"\u003e\nOne of… \u003cbr\u003e\n\u0026nbsp;\u0026nbsp;Number \u003cbr\u003e\n\u0026nbsp;\u0026nbsp;String\n\u003c/td\u003e\n\u003ctd valign=\"top\" align=\"right\" rowspan=\"1\"\u003e\u003c/td\u003e\n\u003ctd valign=\"top\" valign=\"top\" rowspan=\"1\"\u003e\n\nIf specified, disables automatic reflow so that you can trigger it\nmanually by changing this value. The prop itself does nothing, but\nchanging it will cause React to update the component.\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd valign=\"top\" rowspan=\"1\"\u003ereflowTimeout\u003c/td\u003e\n\u003ctd valign=\"top\" colspan=\"2\"\u003eNumber\u003c/td\u003e\n\u003ctd valign=\"top\" align=\"right\" rowspan=\"1\"\u003e\u003c/td\u003e\n\u003ctd valign=\"top\" valign=\"top\" rowspan=\"1\"\u003e\n\nDebounces reflows so they happen at most this often in milliseconds (at\nthe end of the given duration). If not specified, reflow is computed\nevery time the component is rendered.\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd valign=\"top\" rowspan=\"1\"\u003edisabled\u003c/td\u003e\n\u003ctd valign=\"top\" colspan=\"2\"\u003eBoolean\u003c/td\u003e\n\u003ctd valign=\"top\" align=\"right\" rowspan=\"1\"\u003e\u003c/td\u003e\n\u003ctd valign=\"top\" valign=\"top\" rowspan=\"1\"\u003e\n\nWhether to completely disable refitting the text. Any fit adjustments\nthat have already been applied in a previous render will be preserved.\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd valign=\"top\" rowspan=\"1\"\u003eonReflow\u003c/td\u003e\n\u003ctd valign=\"top\" colspan=\"2\"\u003eFunction\u003c/td\u003e\n\u003ctd valign=\"top\" align=\"right\" rowspan=\"1\"\u003e\u003c/td\u003e\n\u003ctd valign=\"top\" valign=\"top\" rowspan=\"1\"\u003e\n\nA function to call when layout has been recomputed and the text is done\nrefitting.\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd valign=\"top\" rowspan=\"1\"\u003epreset\u003c/td\u003e\n\u003ctd valign=\"top\" colspan=\"2\"\u003eString\u003c/td\u003e\n\u003ctd valign=\"top\" align=\"right\" rowspan=\"1\"\u003e\u003c/td\u003e\n\u003ctd valign=\"top\" valign=\"top\" rowspan=\"1\"\u003e\n\nThe name of a preset defined in an outer `Typesetting.Provider`\ncomponent. If it exists, default values for all other props will come\nfrom the specified preset.\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\n\n### PreventWidows\n\n```js\nimport { PreventWidows } from 'react-typesetting';\n```\nPrevents [widows](https://www.fonts.com/content/learning/fontology/level-2/text-typography/rags-widows-orphans)\nby measuring the width of the last line of text rendered by the component’s\nchildren. Spaces will be converted to non-breaking spaces until the given\nminimum width or the maximum number of substitutions is reached.\n\nBy default, element resizes that may necessitate recomputing line widths are\nautomatically detected. By specifying the `reflowKey` prop, you can instead\ntake manual control by changing the prop whenever you’d like the component to\nupdate.\n\n#### Props\n\n\u003ctable\u003e\n\u003cthead\u003e\n\u003ctr\u003e\n\u003cth\u003eName\u003c/th\u003e\n\u003cth colspan=\"2\"\u003eType\u003c/th\u003e\n\u003cth\u003eDefault\u003c/th\u003e\n\u003cth\u003eDescription\u003c/th\u003e\n\u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd valign=\"top\" rowspan=\"1\"\u003eclassName\u003c/td\u003e\n\u003ctd valign=\"top\" colspan=\"2\"\u003eString\u003c/td\u003e\n\u003ctd valign=\"top\" align=\"right\" rowspan=\"1\"\u003e\u003c/td\u003e\n\u003ctd valign=\"top\" valign=\"top\" rowspan=\"1\"\u003e\n\nThe class to apply to the outer wrapper `span` created by this component.\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd valign=\"top\" rowspan=\"1\"\u003estyle\u003c/td\u003e\n\u003ctd valign=\"top\" colspan=\"2\"\u003eObject\u003c/td\u003e\n\u003ctd valign=\"top\" align=\"right\" rowspan=\"1\"\u003e\u003c/td\u003e\n\u003ctd valign=\"top\" valign=\"top\" rowspan=\"1\"\u003e\n\nExtra style properties to add to the outer wrapper `span` created by this\ncomponent.\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd valign=\"top\" rowspan=\"1\"\u003echildren\u003c/td\u003e\n\u003ctd valign=\"top\" colspan=\"2\"\u003eNode\u003c/td\u003e\n\u003ctd valign=\"top\" align=\"right\" rowspan=\"1\"\u003e\u003c/td\u003e\n\u003ctd valign=\"top\" valign=\"top\" rowspan=\"1\"\u003e\n\nThe content to render.\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd valign=\"top\" rowspan=\"1\"\u003emaxSubstitutions\u003c/td\u003e\n\u003ctd valign=\"top\" colspan=\"2\"\u003eNumber\u003c/td\u003e\n\u003ctd valign=\"top\" align=\"right\" rowspan=\"1\"\u003e3\u003c/td\u003e\n\u003ctd valign=\"top\" valign=\"top\" rowspan=\"1\"\u003e\n\nThe maximum number of spaces to substitute.\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd valign=\"top\" rowspan=\"1\"\u003eminLineWidth\u003c/td\u003e\n\u003ctd valign=\"top\" colspan=\"2\"\u003e\nOne of… \u003cbr\u003e\n\u0026nbsp;\u0026nbsp;Number \u003cbr\u003e\n\u0026nbsp;\u0026nbsp;String \u003cbr\u003e\n\u0026nbsp;\u0026nbsp;Function\n\u003c/td\u003e\n\u003ctd valign=\"top\" align=\"right\" rowspan=\"1\"\u003e15%\u003c/td\u003e\n\u003ctd valign=\"top\" valign=\"top\" rowspan=\"1\"\u003e\n\nThe minimum width of the last line, below which non-breaking spaces will\nbe inserted until the minimum is met.\n\n* **Numbers** indicate an absolute pixel width.\n* **Strings** indicate a CSS `width` value that will be computed by\n  temporarily injecting an element into the container and determining its\n  width.\n* **Functions** will be called with relevant data to determine a dynamic\n  number or string value to return. This can be used, for example, to\n  have different rules at different breakpoints – like a media query.\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd valign=\"top\" rowspan=\"1\"\u003enbspChar\u003c/td\u003e\n\u003ctd valign=\"top\" colspan=\"2\"\u003e\nOne of… \u003cbr\u003e\n\u0026nbsp;\u0026nbsp;String \u003cbr\u003e\n\u0026nbsp;\u0026nbsp;React\u0026nbsp;Element \u003cbr\u003e\n\u0026nbsp;\u0026nbsp;Function\n\u003c/td\u003e\n\u003ctd valign=\"top\" align=\"right\" rowspan=\"1\"\u003e\u003ccode title=\"non-breaking space\"\u003e\\u00A0\u003c/code\u003e\u003c/td\u003e\n\u003ctd valign=\"top\" valign=\"top\" rowspan=\"1\"\u003e\n\nA character or element to use when substituting spaces. Defaults to a\nstandard non-breaking space character, which you should almost certainly\nstick with unless you want to visualize where non-breaking spaces are\nbeing inserted for debugging purposes, or adjust their width.\n\n* **String** values will be inserted directly into the existing Text node\n  containing the space.\n* **React Element** values will be rendered into an in-memory “incubator”\n  node, then transplanted into the DOM, splitting up the Text node in\n  which the space was found.\n* **Function** values must produce a string, Text node, Element node, or\n  React Element to insert.\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd valign=\"top\" rowspan=\"1\"\u003ereflowKey\u003c/td\u003e\n\u003ctd valign=\"top\" colspan=\"2\"\u003e\nOne of… \u003cbr\u003e\n\u0026nbsp;\u0026nbsp;Number \u003cbr\u003e\n\u0026nbsp;\u0026nbsp;String\n\u003c/td\u003e\n\u003ctd valign=\"top\" align=\"right\" rowspan=\"1\"\u003e\u003c/td\u003e\n\u003ctd valign=\"top\" valign=\"top\" rowspan=\"1\"\u003e\n\nIf specified, disables automatic reflow so that you can trigger it\nmanually by changing this value. The prop itself does nothing, but\nchanging it will cause React to update the component.\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd valign=\"top\" rowspan=\"1\"\u003ereflowTimeout\u003c/td\u003e\n\u003ctd valign=\"top\" colspan=\"2\"\u003eNumber\u003c/td\u003e\n\u003ctd valign=\"top\" align=\"right\" rowspan=\"1\"\u003e\u003c/td\u003e\n\u003ctd valign=\"top\" valign=\"top\" rowspan=\"1\"\u003e\n\nDebounces reflows so they happen at most this often in milliseconds (at\nthe end of the given duration). If not specified, reflow is computed\nevery time the component is rendered.\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd valign=\"top\" rowspan=\"1\"\u003edisabled\u003c/td\u003e\n\u003ctd valign=\"top\" colspan=\"2\"\u003eBoolean\u003c/td\u003e\n\u003ctd valign=\"top\" align=\"right\" rowspan=\"1\"\u003e\u003c/td\u003e\n\u003ctd valign=\"top\" valign=\"top\" rowspan=\"1\"\u003e\n\nWhether to completely disable widow prevention.\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd valign=\"top\" rowspan=\"1\"\u003eonReflow\u003c/td\u003e\n\u003ctd valign=\"top\" colspan=\"2\"\u003eFunction\u003c/td\u003e\n\u003ctd valign=\"top\" align=\"right\" rowspan=\"1\"\u003e\u003c/td\u003e\n\u003ctd valign=\"top\" valign=\"top\" rowspan=\"1\"\u003e\n\nA function to call when layout has been recomputed and space substitution\nis done.\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd valign=\"top\" rowspan=\"1\"\u003epreset\u003c/td\u003e\n\u003ctd valign=\"top\" colspan=\"2\"\u003eString\u003c/td\u003e\n\u003ctd valign=\"top\" align=\"right\" rowspan=\"1\"\u003e\u003c/td\u003e\n\u003ctd valign=\"top\" valign=\"top\" rowspan=\"1\"\u003e\n\nThe name of a preset defined in an outer `Typesetting.Provider`\ncomponent. If it exists, default values for all other props will come\nfrom the specified preset.\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\n\n### Justify\n\n```js\nimport { Justify } from 'react-typesetting';\n```\n\nWhile this may include more advanced justification features in the future, it\nis currently very simple: it conditionally applies `text-align: justify` to\nits container element (a `\u003cp\u003e` by default) depending on whether or not there\nis enough room to avoid large, unseemly word gaps. The minimum width is\ndefined by `minWidth` and defaults to 16 ems.\n\nYou might also accomplish this with media queries, but this component can\ndetermine the exact width available to the container element instead of just\nthe entire page.\n\n#### Props\n\n\u003ctable\u003e\n\u003cthead\u003e\n\u003ctr\u003e\n\u003cth\u003eName\u003c/th\u003e\n\u003cth colspan=\"2\"\u003eType\u003c/th\u003e\n\u003cth\u003eDefault\u003c/th\u003e\n\u003cth\u003eDescription\u003c/th\u003e\n\u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd valign=\"top\" rowspan=\"1\"\u003eclassName\u003c/td\u003e\n\u003ctd valign=\"top\" colspan=\"2\"\u003eString\u003c/td\u003e\n\u003ctd valign=\"top\" align=\"right\" rowspan=\"1\"\u003e\u003c/td\u003e\n\u003ctd valign=\"top\" valign=\"top\" rowspan=\"1\"\u003e\n\nThe class to apply to the outer wrapper element created by this\ncomponent.\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd valign=\"top\" rowspan=\"1\"\u003estyle\u003c/td\u003e\n\u003ctd valign=\"top\" colspan=\"2\"\u003eObject\u003c/td\u003e\n\u003ctd valign=\"top\" align=\"right\" rowspan=\"1\"\u003e\u003c/td\u003e\n\u003ctd valign=\"top\" valign=\"top\" rowspan=\"1\"\u003e\n\nExtra style properties to add to the outer wrapper element created by\nthis component.\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd valign=\"top\" rowspan=\"1\"\u003echildren\u003c/td\u003e\n\u003ctd valign=\"top\" colspan=\"2\"\u003eNode\u003c/td\u003e\n\u003ctd valign=\"top\" align=\"right\" rowspan=\"1\"\u003e\u003c/td\u003e\n\u003ctd valign=\"top\" valign=\"top\" rowspan=\"1\"\u003e\n\nThe content to render.\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd valign=\"top\" rowspan=\"1\"\u003eas\u003c/td\u003e\n\u003ctd valign=\"top\" colspan=\"2\"\u003e\nOne of… \u003cbr\u003e\n\u0026nbsp;\u0026nbsp;String \u003cbr\u003e\n\u0026nbsp;\u0026nbsp;Function \u003cbr\u003e\n\u0026nbsp;\u0026nbsp;Object\n\u003c/td\u003e\n\u003ctd valign=\"top\" align=\"right\" rowspan=\"1\"\u003ep\u003c/td\u003e\n\u003ctd valign=\"top\" valign=\"top\" rowspan=\"1\"\u003e\n\nThe element type in which to render the supplied children. It must be\na block level element, like `p` or `div`, since `text-align` has no\neffect on inline elements. It may also be a custom React component, as\nlong as it uses `forwardRef`.\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd valign=\"top\" rowspan=\"1\"\u003eminWidth\u003c/td\u003e\n\u003ctd valign=\"top\" colspan=\"2\"\u003e\nOne of… \u003cbr\u003e\n\u0026nbsp;\u0026nbsp;Number \u003cbr\u003e\n\u0026nbsp;\u0026nbsp;String\n\u003c/td\u003e\n\u003ctd valign=\"top\" align=\"right\" rowspan=\"1\"\u003e16em\u003c/td\u003e\n\u003ctd valign=\"top\" valign=\"top\" rowspan=\"1\"\u003e\n\nThe minimum width at which to allow justified text. Numbers indicate an\nabsolute pixel width. Strings will be applied to an element's CSS in\norder to perform the width calculation.\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd valign=\"top\" rowspan=\"1\"\u003einitialJustify\u003c/td\u003e\n\u003ctd valign=\"top\" colspan=\"2\"\u003eBoolean\u003c/td\u003e\n\u003ctd valign=\"top\" align=\"right\" rowspan=\"1\"\u003etrue\u003c/td\u003e\n\u003ctd valign=\"top\" valign=\"top\" rowspan=\"1\"\u003e\n\nWhether or not to initially set `text-align: justify` before the\navailable width has been determined.\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd valign=\"top\" rowspan=\"1\"\u003ereflowKey\u003c/td\u003e\n\u003ctd valign=\"top\" colspan=\"2\"\u003e\nOne of… \u003cbr\u003e\n\u0026nbsp;\u0026nbsp;Number \u003cbr\u003e\n\u0026nbsp;\u0026nbsp;String\n\u003c/td\u003e\n\u003ctd valign=\"top\" align=\"right\" rowspan=\"1\"\u003e\u003c/td\u003e\n\u003ctd valign=\"top\" valign=\"top\" rowspan=\"1\"\u003e\n\nIf specified, disables automatic reflow so that you can trigger it\nmanually by changing this value. The prop itself does nothing, but\nchanging it will cause React to update the component.\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd valign=\"top\" rowspan=\"1\"\u003ereflowTimeout\u003c/td\u003e\n\u003ctd valign=\"top\" colspan=\"2\"\u003eNumber\u003c/td\u003e\n\u003ctd valign=\"top\" align=\"right\" rowspan=\"1\"\u003e\u003c/td\u003e\n\u003ctd valign=\"top\" valign=\"top\" rowspan=\"1\"\u003e\n\nDebounces reflows so they happen at most this often in milliseconds (at\nthe end of the given duration). If not specified, reflow is computed\nevery time the component is rendered.\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd valign=\"top\" rowspan=\"1\"\u003edisabled\u003c/td\u003e\n\u003ctd valign=\"top\" colspan=\"2\"\u003eBoolean\u003c/td\u003e\n\u003ctd valign=\"top\" align=\"right\" rowspan=\"1\"\u003e\u003c/td\u003e\n\u003ctd valign=\"top\" valign=\"top\" rowspan=\"1\"\u003e\n\nWhether to completely disable justification detection. The last\nalignment that was applied will be preserved.\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd valign=\"top\" rowspan=\"1\"\u003eonReflow\u003c/td\u003e\n\u003ctd valign=\"top\" colspan=\"2\"\u003eFunction\u003c/td\u003e\n\u003ctd valign=\"top\" align=\"right\" rowspan=\"1\"\u003e\u003c/td\u003e\n\u003ctd valign=\"top\" valign=\"top\" rowspan=\"1\"\u003e\n\nA function to call when layout has been recomputed and justification\nhas been applied or unapplied.\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd valign=\"top\" rowspan=\"1\"\u003epreset\u003c/td\u003e\n\u003ctd valign=\"top\" colspan=\"2\"\u003eString\u003c/td\u003e\n\u003ctd valign=\"top\" align=\"right\" rowspan=\"1\"\u003e\u003c/td\u003e\n\u003ctd valign=\"top\" valign=\"top\" rowspan=\"1\"\u003e\n\nThe name of a preset defined in an outer `Typesetting.Provider`\ncomponent. If it exists, default values for all other props will come\nfrom the specified preset.\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\n\n### FontObserver\n\n```js\nimport { FontObserver } from 'react-typesetting';\n```\n\nA component for observing the fonts specified in the `FontObserver.Provider`\ncomponent.\n\n#### Props\n\n\u003ctable\u003e\n\u003cthead\u003e\n\u003ctr\u003e\n\u003cth\u003eName\u003c/th\u003e\n\u003cth colspan=\"2\"\u003eType\u003c/th\u003e\n\u003cth\u003eDefault\u003c/th\u003e\n\u003cth\u003eDescription\u003c/th\u003e\n\u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd valign=\"top\" rowspan=\"1\"\u003echildren\u003c/td\u003e\n\u003ctd valign=\"top\" colspan=\"2\"\u003eFunction\u003c/td\u003e\n\u003ctd valign=\"top\" align=\"right\" rowspan=\"1\"\u003e\u003c/td\u003e\n\u003ctd valign=\"top\" valign=\"top\" rowspan=\"1\"\u003e\n\nA function that will receive the current status of the observed fonts.\nThe argument will be an object with these properties:\n\n- `fonts`: An array of the fonts passed to `FontObserver.Provider`, each\n  with a `loaded` and `error` property.\n- `loaded`: Whether all observed fonts are done loading.\n- `error`: If any fonts failed to load, this will be populated with the\n  first error.\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\n\n### FontObserver.Provider\n\n```js\nimport { FontObserver } from 'react-typesetting';\n```\n\nA context provider for specifying which fonts to observe.\n\n#### Props\n\n\u003ctable\u003e\n\u003cthead\u003e\n\u003ctr\u003e\n\u003cth\u003eName\u003c/th\u003e\n\u003cth colspan=\"2\"\u003eType\u003c/th\u003e\n\u003cth\u003eDefault\u003c/th\u003e\n\u003cth\u003eDescription\u003c/th\u003e\n\u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd valign=\"top\" rowspan=\"8\"\u003e\u003cstrong title=\"Required\"\u003efonts\u003c/strong\u003e\u003c/td\u003e\n\u003ctd valign=\"top\" colspan=\"2\"\u003e\nArray of… \u003cbr\u003e\n\u0026nbsp;\u0026nbsp;One of… \u003cbr\u003e\n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;String \u003cbr\u003e\n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u003ca href=\"#shape-1\" title=\"{ family, weight, style, stretch, testString, timeout }\"\u003eObject\u0026thinsp;\u003csup\u003e1\u003c/sup\u003e\u003c/a\u003e\n\u003c/td\u003e\n\u003ctd valign=\"top\" align=\"right\" rowspan=\"8\"\u003e\u003c/td\u003e\n\u003ctd valign=\"top\" valign=\"top\" rowspan=\"8\"\u003e\n\nThe fonts to load and observe. The font files themselves should already\nbe specified somewhere (in CSS), this component simply uses `FontFaceObserver`\nto force them to load (if necessary) and observe when they are ready.\n\nEach item in the array specifies the font `family`, `weight`, `style`,\nand `stretch`, with only `family` being required. Additionally, each item\ncan contain a custom `testString` and `timeout` for that font, if they\nshould differ from the defaults. If only the family name is needed, the\narray item can just be a string.\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\u003ctd colspan=\"2\"\u003e\u003ca name=\"shape-1\"\u003e\u003csup\u003e1\u003c/sup\u003e\u0026thinsp;Object\u003c/a\u003e\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd valign=\"top\"\u003e\u003cstrong title=\"Required\"\u003efamily\u003c/strong\u003e\u003c/td\u003e\u003ctd valign=\"top\"\u003eString\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd valign=\"top\"\u003eweight\u003c/td\u003e\u003ctd valign=\"top\"\u003eOne of… \u003cbr\u003e\n\u0026nbsp;\u0026nbsp;Number \u003cbr\u003e\n\u0026nbsp;\u0026nbsp;String\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd valign=\"top\"\u003estyle\u003c/td\u003e\u003ctd valign=\"top\"\u003eString\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd valign=\"top\"\u003estretch\u003c/td\u003e\u003ctd valign=\"top\"\u003eString\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd valign=\"top\"\u003etestString\u003c/td\u003e\u003ctd valign=\"top\"\u003eString\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd valign=\"top\"\u003etimeout\u003c/td\u003e\u003ctd valign=\"top\"\u003eNumber\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd valign=\"top\" rowspan=\"1\"\u003etestString\u003c/td\u003e\n\u003ctd valign=\"top\" colspan=\"2\"\u003eString\u003c/td\u003e\n\u003ctd valign=\"top\" align=\"right\" rowspan=\"1\"\u003e\u003c/td\u003e\n\u003ctd valign=\"top\" valign=\"top\" rowspan=\"1\"\u003e\n\nA custom test string to pass to the `load` method of `FontFaceObserver`,\nto be used for all fonts that do not specify their own `testString`.\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd valign=\"top\" rowspan=\"1\"\u003etimeout\u003c/td\u003e\n\u003ctd valign=\"top\" colspan=\"2\"\u003eNumber\u003c/td\u003e\n\u003ctd valign=\"top\" align=\"right\" rowspan=\"1\"\u003e\u003c/td\u003e\n\u003ctd valign=\"top\" valign=\"top\" rowspan=\"1\"\u003e\n\nA custom timeout in milliseconds to pass to the `load` method of\n`FontFaceObserver`, to be used for all fonts that do not specify their\nown `timeout`.\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd valign=\"top\" rowspan=\"1\"\u003echildren\u003c/td\u003e\n\u003ctd valign=\"top\" colspan=\"2\"\u003eNode\u003c/td\u003e\n\u003ctd valign=\"top\" align=\"right\" rowspan=\"1\"\u003e\u003c/td\u003e\n\u003ctd valign=\"top\" valign=\"top\" rowspan=\"1\"\u003e\n\nThe content that will have access to font loading status via context.\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\n\n### Typesetting.Provider\n\n```js\nimport { Typesetting } from 'react-typesetting';\n```\n\nA context provider for defining presets for all other `react-typesetting`\ncomponents to use.\n\n#### Props\n\n\u003ctable\u003e\n\u003cthead\u003e\n\u003ctr\u003e\n\u003cth\u003eName\u003c/th\u003e\n\u003cth colspan=\"2\"\u003eType\u003c/th\u003e\n\u003cth\u003eDefault\u003c/th\u003e\n\u003cth\u003eDescription\u003c/th\u003e\n\u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd valign=\"top\" rowspan=\"1\"\u003epresets\u003c/td\u003e\n\u003ctd valign=\"top\" colspan=\"2\"\u003eObject\u003c/td\u003e\n\u003ctd valign=\"top\" align=\"right\" rowspan=\"1\"\u003e{}\u003c/td\u003e\n\u003ctd valign=\"top\" valign=\"top\" rowspan=\"1\"\u003e\n\nAn object mapping preset names to default props. For example, given the\nvalue:\n\n```js\n{ myPreset: { minFontSize: 1, maxIterations: 3 } }\n```\n\n…the `TightenText` component could use this preset by specifying the\n`preset` prop:\n\n```jsx\n\u003cTightenText preset=\"myPreset\" /\u003e\n```\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd valign=\"top\" rowspan=\"1\"\u003echildren\u003c/td\u003e\n\u003ctd valign=\"top\" colspan=\"2\"\u003eNode\u003c/td\u003e\n\u003ctd valign=\"top\" align=\"right\" rowspan=\"1\"\u003e\u003c/td\u003e\n\u003ctd valign=\"top\" valign=\"top\" rowspan=\"1\"\u003e\n\nThe content that will have access to the defined presets via context.\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\n\u003c!-- AUTO-GENERATED-CONTENT:END --\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fexogen%2Freact-typesetting","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fexogen%2Freact-typesetting","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fexogen%2Freact-typesetting/lists"}