{"id":16832478,"url":"https://github.com/kennethormandy/react-fittext","last_synced_at":"2025-09-03T19:32:00.747Z","repository":{"id":40753598,"uuid":"133104335","full_name":"kennethormandy/react-fittext","owner":"kennethormandy","description":" FitText.js as a React v16+ component.","archived":false,"fork":false,"pushed_at":"2022-12-07T13:31:56.000Z","size":3629,"stargazers_count":70,"open_issues_count":27,"forks_count":11,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-12-27T03:08:20.771Z","etag":null,"topics":["react","typography"],"latest_commit_sha":null,"homepage":"http://react-fittext.kennethormandy.com","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/kennethormandy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-05-12T01:41:06.000Z","updated_at":"2024-10-09T03:00:22.000Z","dependencies_parsed_at":"2023-01-24T17:30:32.847Z","dependency_job_id":null,"html_url":"https://github.com/kennethormandy/react-fittext","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kennethormandy%2Freact-fittext","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kennethormandy%2Freact-fittext/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kennethormandy%2Freact-fittext/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kennethormandy%2Freact-fittext/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kennethormandy","download_url":"https://codeload.github.com/kennethormandy/react-fittext/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":231913959,"owners_count":18445008,"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":["react","typography"],"created_at":"2024-10-13T11:49:13.509Z","updated_at":"2024-12-30T20:47:07.449Z","avatar_url":"https://github.com/kennethormandy.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React FitText\n\n[FitText.js](https://github.com/davatron5000/FitText.js) as a React v16+ component.\n\nIf you want to make specific text fit within a container, and then maintain that ratio across screen sizes, this component is for you.\n\nFitText is a particularly useful approach for:\n\n- Predetermined content (ie. not user generated or dynamic)\n- Text that fits within a container until it hits a minimum or maximum font size, and then reflows normally from there\n- Multi-line text that fits\n\n## Alternatives\n\nIf you don’t have any of these requirements, another approach might suit you better. Some possible alternatives include:\n\n- Using a pre-made SVG without outlining the text, if you have predetermined content, and want truly the exact same layout across all viewports\n- Using SVG dynamically with [React FitterHappierText](https://github.com/jxnblk/react-fitter-happier-text) (the changes are all [open as Pull Requests](https://github.com/jxnblk/react-fitter-happier-text/pulls) on [Brent Jackson’s original](https://github.com/jxnblk/react-fitter-happier-text))\n- Using [BigIdeasText](http://github.com/kennethormandy/big-ideas-text) within React lifecycle hooks like `componentDidMount()`. I may open source a React-specific fork of [Zach Leatherman’s original](https://github.com/zachleat/BigText) in the future.\n- Using Mike Riethmuller’s clever [CSS-only fluid type technique](https://www.madebymike.com.au/writing/precise-control-responsive-typography/) and [other examples](https://www.madebymike.com.au/writing/fluid-type-calc-examples/), if you have some scaling constraints but aren’t concerned about reflow across all sizes\n- Plain viewport units, if the only relevant container is the width (or height) of the page:\n\n```html\n\u003cdiv class=\"example\"\u003e\n  Scale with the viewport\n\u003c/div\u003e\n```\n\n```css\n/* Minimum font size */\n.example {\n  font-size: 24px;\n}\n\n/* Scale linearly after this breakpoint */\n@media (min-width: 480px) {\n  .example {\n    font-size: 5vw;\n  }\n}\n```\n\nIf you’re curious why some sort of automatic scaling isn’t already possible using CSS alone, or why it might still be a challenge in the future, [read more in this CSS Working Group drafts issue](https://github.com/w3c/csswg-drafts/issues/2528).\n\n## Differences from the existing React FitText\n\nThis component is written specifically for React v16 and up, includes tests, and uses state to avoid DOM manipulation.\n\nThe existing [React FitText component by @gianu](https://github.com/gianu/react-fittext) should still work with current versions of React, and is stateless, but manipulates the DOM directly to change font sizes.\n\nThe approach I’m using feels more React-appropriate, at least to me. I use this component regularly enough that it made sense for me to maintain my own version regardless.\n\n## Installation\n\n```sh\nnpm install --save @kennethormandy/react-fittext\n```\n\n## Example\n\n```js\nimport FitText from '@kennethormandy/react-fittext'\n```\n\n```jsx\n\u003cFitText compressor={0.5}\u003eThe quick brown fox jumps over the lazy dog.\u003c/FitText\u003e\n```\n\nWith multiple children:\n\n```jsx\n\u003cFitText compressor={0.5}\u003e\n  \u003cReact.Fragment\u003e\n    \u003ch2\u003ePangram\u003c/h2\u003e\n    \u003cp\u003eThe quick brown fox jumps over the lazy dog\u003c/p\u003e\n  \u003c/React.Fragment\u003e\n\u003c/FitText\u003e\n```\n\n## Props\n\n### `compressor`\n\nFrom the original FitText.js documentation:\n\n\u003e If your text is resizing poorly, you'll want to turn tweak up/down “The Compressor.” It works a little like a guitar amp. The default is `1`.\n\u003e —[davatron5000](https://github.com/davatron5000/FitText.js)\n\n```jsx\n\u003cFitText compressor={3}\u003eThe quick brown fox jumps over the lazy dog.\u003c/FitText\u003e\n```\n\n```jsx\n\u003cFitText compressor={1}\u003eThe quick brown fox jumps over the lazy dog.\u003c/FitText\u003e\n```\n\n```jsx\n\u003cFitText compressor={0.3}\u003eThe quick brown fox jumps over the lazy dog.\u003c/FitText\u003e\n```\n\n### `minFontSize` and `maxFontSize`\n\n```jsx\n\u003cFitText compressor={0.5} minFontSize={24} maxFontSize={96}\u003e\n  The quick brown fox jumps over the lazy dog.\n\u003c/FitText\u003e\n```\n\n### `debounce`\n\nChange the included debounce resize timeout. How long should React FitText wait before recalculating the `fontSize`?\n\n```jsx\n\u003cFitText debounce={3000} compressor={0.5}\u003e\n  The very slow brown fox\n\u003c/FitText\u003e\n```\n\nThe default is `100` milliseconds.\n\n### `defaultFontSize`\n\nReact FitText needs the viewport size to determine the size the type, but you might want to provide an explicit fallback when using server-side rendering with React.\n\n```jsx\n\u003cFitText defaultFontSize={100} compressor={0.5}\u003e\n  The quick brown fox\n\u003c/FitText\u003e\n```\n\nThe default is `inherit`, so typically you will already have a resonable fallback without using this prop, using CSS only. For example:\n\n```css\n.headline {\n  font-size: 6.25rem;\n}\n```\n\n```jsx\n\u003cdiv className=\"headline\"\u003e\n  \u003cFitText compressor={0.5}\u003eThe quick brown fox\u003c/FitText\u003e\n\u003c/div\u003e\n```\n\n## `vertical`\n\nAdd the `vertical` prop to scale vertically, rather than horizontally (the default).\n\n```jsx\n\u003cdiv style={{ height: '75vh' }}\u003e\n  \u003cFitText vertical compressor={1.25}\u003e\n    \u003cul\u003e\n      \u003cli\u003eWaterfront\u003c/li\u003e\n      \u003cli\u003eVancouver City Centre\u003c/li\u003e\n      \u003cli\u003eYaletown–Roundhouse\u003c/li\u003e\n      \u003cli\u003eOlympic Village\u003c/li\u003e\n      \u003cli\u003eBroadway–City Hall\u003c/li\u003e\n      \u003cli\u003eKing Edward\u003c/li\u003e\n      \u003cli\u003eOakridge–41st Avenue\u003c/li\u003e\n      \u003cli\u003eLangara–49th Avenue\u003c/li\u003e\n      \u003cli\u003eMarine Drive\u003c/li\u003e\n    \u003c/ul\u003e\n  \u003c/FitText\u003e\n\u003c/div\u003e\n```\n\n## `parent`\n\nUse a different parent, other than the immediate `parentNode`, to calculate the vertical height.\n\n```jsx\n\u003cdiv id=\"js-example\"\u003e\n  \u003cAnotherThing\u003e\n    \u003cFitText vertical parent=\"js-example\"\u003e\n      {dynamicChildren}\n    \u003c/FitText\u003e\n  \u003c/AnotherThing\u003e\n\u003c/div\u003e\n```\n\n```jsx\n\u003cdiv\u003e\n  \u003cdiv style={{ height: '1000px' }} ref={el =\u003e (this.parentNode = el)}\u003e\n    \u003ch1\u003eA contrived example!\u003c/h1\u003e\n  \u003c/div\u003e\n  \u003cFitText vertical parent={this.parentNode}\u003e\n    {dynamicChildren}\n  \u003c/FitText\u003e\n\u003c/div\u003e\n```\n\n## Running locally\n\n```sh\ngit clone https://github.com/kennethormandy/react-fittext\ncd kennethormandy\n\n# Install dependencies\nnpm install\n\n# Run the project\nnpm start\n```\n\nNow, you can open `http://localhost:8080` and modify `src/dev.js` while working on the project.\n\nTo run the Storybook [stories](http://react-fittext.kennethormandy.com) instead:\n\n```sh\nnpm run storybook\n```\n\n## Samples\n\nI’ve used various versions of this project in the following [type specimen sites](https://kennethormandy.com/type-specimen-sites/):\n\n- [Regina Black](http://regina-black.losttype.com)\n- [DDC Hardware](https://kennethormandy.com/portfolio/ddc-hardware-type-specimen-site/)\n- [Google Fonts + Japanese collection](https://googlefonts.github.io/japanese)\n- [Boomville](http://boomville.losttype.com)\n- [Tofino v2](http://tofino.losttype.com)\n- [My website](https://kennethormandy.com)\n- [Protipo](https://protipo.type-together.com)\n- TBA\n- TBA\n\nOther projects:\n\n- [Cygnus Design Group](https://www.cygnus.group/) (added vertical support)\n- Your project? [Add it to the README](https://github.com/kennethormandy/react-fittext/edit/master/README.md)\n\n## Credits\n\n- The original [FitText.js](https://github.com/davatron5000/FitText.js) by [@davatron5000](https://github.com/davatron5000/FitText.js)\n- [react-fittext](https://github.com/gianu/react-fittext) by [@gianu](https://github.com/gianu)\n\n## License\n\n[The MIT License (MIT)](LICENSE.md)\n\nCopyright © 2014 [Sergio Rafael Gianazza](https://github.com/gianu/react-fittext/blob/master/LICENSE)\u003cbr/\u003e\nCopyright © 2017–2019 [Kenneth Ormandy Inc.](https://kennethormandy.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkennethormandy%2Freact-fittext","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkennethormandy%2Freact-fittext","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkennethormandy%2Freact-fittext/lists"}