{"id":22642756,"url":"https://github.com/datchley/react-scale-text","last_synced_at":"2025-04-11T23:22:53.448Z","repository":{"id":57344033,"uuid":"84780879","full_name":"datchley/react-scale-text","owner":"datchley","description":"A React library to keep an element's text scaled to fit it's container","archived":false,"fork":false,"pushed_at":"2019-02-14T07:51:12.000Z","size":418,"stargazers_count":56,"open_issues_count":6,"forks_count":15,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-25T19:14:02.236Z","etag":null,"topics":["react","react-component","scale"],"latest_commit_sha":null,"homepage":null,"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/datchley.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-03-13T03:38:07.000Z","updated_at":"2025-03-01T10:28:09.000Z","dependencies_parsed_at":"2022-09-12T06:30:47.653Z","dependency_job_id":null,"html_url":"https://github.com/datchley/react-scale-text","commit_stats":null,"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/datchley%2Freact-scale-text","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/datchley%2Freact-scale-text/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/datchley%2Freact-scale-text/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/datchley%2Freact-scale-text/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/datchley","download_url":"https://codeload.github.com/datchley/react-scale-text/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247980833,"owners_count":21027803,"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","react-component","scale"],"created_at":"2024-12-09T05:08:21.413Z","updated_at":"2025-04-11T23:22:53.418Z","avatar_url":"https://github.com/datchley.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React ScaleText Component\n\n[![NPM Version](https://img.shields.io/npm/v/react-scale-text.svg)](https://www.npmjs.com/package/react-scale-text)\n[![Coverage Status](https://coveralls.io/repos/github/datchley/react-scale-text/badge.svg?branch=master)](https://coveralls.io/github/datchley/react-scale-text?branch=master)\n[![Build Status](https://travis-ci.org/datchley/react-scale-text.svg?branch=master)](https://travis-ci.org/datchley/react-scale-text)\n[![Standard Version](https://img.shields.io/badge/release-standard%20version-brightgreen.svg)](https://github.com/conventional-changelog/standard-version)\n\n`ScaleText` is a component that allows for dynamically sizing the text within a given component to fit its parent container's width and height. It should work with various positioning and should scale the text smoothly. The scaling of an elements text is done on initial render, and then triggered again from a window resize, which should keep the child element's text scaled to the parent's dimensions.\n\nView [demo](https://datchley.github.io/react-scale-text/) page.\n\n# Installation\n\nInstall as npm module and then Use via `import` or `require`\n\n```\nnpm install --save react-scale-text\n```\n\n```js\nimport ScaleText from \"react-scale-text\";\n```\n\nor include the UMD build via script tag from CDN:\n\n```html\n\u003cscript src=\"https://unpkg.com/react-scale-text@latest/lib/react-scale-text.js\"\u003e\u003c/script\u003e\n```\n\nor, use the minified version, `https://unpkg.com/react-scale-text@latest/lib/react-scale-text.min.js`.\nThe UMD build makes the component `ScaleText` available globally for use in the script.\n\n# Usage\n\n`ScaleText` wraps a single Element. Upon render it will scale the text (`font-size`) of that element to match the width and height of\nthe parent element (`ScaleText`'s direct parent). Upon resize of the browser window after the intial render, it will ensure the text is always\nscaled to match the parent container's dimensions.\n\n## Example\n\n```jsx\n\u003cdiv className=\"parent\" style={{ width: \"400px\", height: \"400px\" }}\u003e\n  \u003cScaleText\u003e\n    \u003cp className=\"child\"\u003eSome text\u003c/p\u003e\n  \u003c/ScaleText\u003e\n\u003c/div\u003e\n```\n\nIn the above example, the `p` elements font-size would be scaled to match the width/height of the the `div.parent` element that contains it on initial render, and thereafter, on any window resize event. With no `minFontSize` or `maxFontSize` props, the text will scale infinitely with the `div.parent` element as it is resized.\n\n## `widthOnly` Example\n\n```jsx\n\u003cdiv className=\"parent\" style={{ width: \"100%\", height: \"400px\" }}\u003e\n  \u003cScaleText widthOnly={true}\u003e\n    \u003cp className=\"child\"\u003eSome text\u003c/p\u003e\n  \u003c/ScaleText\u003e\n\u003c/div\u003e\n```\n\nThe above example, using the `widthOnly` prop tells `ScaleText` to only scale its child element based on the parent's width, not the height. This essentially turns off overflow checking on height to allow the element to scale to the full width of the container. You can then control the height directly via CSS or other means.\n\n## Props\n\nThis component takes a single `Element` as a child to render, which is required.\n\nThere are two optional props that can be passed.\n\n* **minFontSize** - the minimum font size to scale down to (_floor_) - default `Number.NEGATIVE_INFINITY`\n* **maxFontSize** - the maximum font size to scale up to (_ceiling_) - default `Number.POSITIVE_INFINITY`\n* **widthOnly** - will scale the element based on the width of it's container only, not the height - default `false`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdatchley%2Freact-scale-text","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdatchley%2Freact-scale-text","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdatchley%2Freact-scale-text/lists"}