{"id":13850335,"url":"https://github.com/saltycrane/use-fit-text","last_synced_at":"2025-04-06T20:09:31.121Z","repository":{"id":36171205,"uuid":"222036001","full_name":"saltycrane/use-fit-text","owner":"saltycrane","description":"React hook used to fit text in a div","archived":false,"fork":false,"pushed_at":"2023-10-03T18:03:50.000Z","size":989,"stargazers_count":120,"open_issues_count":17,"forks_count":18,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-04-26T00:16:08.443Z","etag":null,"topics":["font-size","hooks","react"],"latest_commit_sha":null,"homepage":"https://saltycrane.github.io/use-fit-text/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/saltycrane.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2019-11-16T02:33:42.000Z","updated_at":"2024-04-18T13:42:07.000Z","dependencies_parsed_at":"2024-01-13T17:12:06.384Z","dependency_job_id":"1bfa1e7f-efe8-4b22-9eb0-d4f2ecf49967","html_url":"https://github.com/saltycrane/use-fit-text","commit_stats":{"total_commits":25,"total_committers":1,"mean_commits":25.0,"dds":0.0,"last_synced_commit":"39d540ad7eafde9ce8cb4335a023664c5023416b"},"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saltycrane%2Fuse-fit-text","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saltycrane%2Fuse-fit-text/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saltycrane%2Fuse-fit-text/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saltycrane%2Fuse-fit-text/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/saltycrane","download_url":"https://codeload.github.com/saltycrane/use-fit-text/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247543589,"owners_count":20955865,"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":["font-size","hooks","react"],"created_at":"2024-08-04T20:01:06.543Z","updated_at":"2025-04-06T20:09:31.097Z","avatar_url":"https://github.com/saltycrane.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# use-fit-text [![npm version](https://badge.fury.io/js/use-fit-text.svg)](https://badge.fury.io/js/use-fit-text)\n\nReact hook that iteratively adjusts the font size so that text will fit in a div.\n \n  - checks if text is overflowing by [using `scrollHeight` and `offsetHeight`](https://stackoverflow.com/a/10017343/101911)\n  - recalculates when container is resized (using ([polyfilled](https://github.com/que-etc/resize-observer-polyfill)) [`ResizeObserver`](https://developers.google.com/web/updates/2016/10/resizeobserver))\n  - recalculates when content changes\n  - uses binary search; with default options, makes a maximum of 5 adjustments with a resolution of 5% font size from 20-100%\n  - [\u003c 4 kB](https://bundlephobia.com/result?p=use-fit-text@2.4.0) minified + gzipped\n  - written in TypeScript\n\n## Installation\n\n```\nnpm install --save use-fit-text\n```\n\n## Usage\n\n```js\nimport React from \"react\";\nimport useFitText from \"use-fit-text\";\n\nfunction Example() {\n  const { fontSize, ref } = useFitText();\n\n  return (\n    \u003cdiv ref={ref} style={{ fontSize, height: 40, width: 100 }}\u003e\n      Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n    \u003c/div\u003e\n  );\n}\n```\n\n## Demo / example code\n\n- Demo site: https://saltycrane.github.io/use-fit-text/\n- [Example code](/examples/pages/index.tsx) is in the `/examples` folder\n\n## API\n\n### `useFitText(options)`\n- Returns an object with the following properties:\n  - `fontSize` (`string`) - the font size as a string (CSS percent) to be passed as the `fontSize` property of the `style` prop of the `div`\n  - `ref` (`React.MutableRefObject\u003cHTMLDivElement\u003e`) - the ref to be passed to the `ref` attribute of the `div`\n- `options` (optional) - an object with the following optional properties:\n\n  - `logLevel` (`string`, default: `info`) - one of `debug`, `info`, `warn`, `error`, or `none`\n  - `maxFontSize` (`number`, default: `100`) - maximum font size in percent\n  - `minFontSize` (`number`, default: `20`) - minimum font size in percent\n  - `onFinish` (`(fontSize: number) =\u003e void`, default: `undefined`) - function that is called when resizing\n      finishes. The final fontSize is passed to the function as an argument.\n  - `onStart` (`() =\u003e void`, default: `undefined`) - function that is called when resizing starts\n  - `resolution` (`number`, default: `5`) - font size resolution to adjust to in percent\n\n## Questions\n\n- Why doesn't it work with Flexbox `justify-content: flex-end;`?\n  This appears [to be](https://stackoverflow.com/questions/36130760/use-justify-content-flex-end-and-to-have-vertical-scrollbar) [a bug](https://github.com/philipwalton/flexbugs/issues/53) with Flexbox. Try using CSS Grid or `margin-top: auto;`\n- What does the \"reached `minFontSize = 20` without fitting text\" message in the console mean?\n  This means `use-fit-text` was not able to fit the text using the `minFontSize` setting of 20. To ensure the text fits, set `minFontSize` to a smaller value.\n\n## Changelog\n\n- v2.4.0\n  - handle case where `minFontSize` is set larger than the `fontSize` value needed to fit the text in the div. Log a message to the console in this case.\n  - fix final adjustment calcuation\n  - add `logLevel` option to control what is logged to the console\n- v2.3.0\n  - automatically recalculate font size when content changes\n  - fix bug where a recalculation was not done on resize if the text initially fit in the div\n- v2.2.0 - add `onStart` and `onFinish` callbacks\n- v2.1.3 - export `TOptions` TypeScript type\n- v2.1.2 - remove `/// \u003creference types=\"next\" /\u003e` in `dist/index.d.ts`\n- v2.1.0\n  - fix SSR/prerender issue where text did not resize\n  - suppress `useLayoutEffect` warning for server render\n- v2.0.0\n  - use `ResizeObserver` to always recalculate on container resize\n  - remove `recalcOnResize` option\n  - `useLayoutEffect` instead of `useEffect` to avoid flashing\n- v1.2.1 - fix scrollbar issue in example\n- v1.2.0 - add `recalcOnResize` and other options\n- v1.1.0 - fix binary search bug\n- v1.0.2 - add example\n- v1.0.0 - initial release\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsaltycrane%2Fuse-fit-text","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsaltycrane%2Fuse-fit-text","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsaltycrane%2Fuse-fit-text/lists"}