https://github.com/datchley/react-scale-text
A React library to keep an element's text scaled to fit it's container
https://github.com/datchley/react-scale-text
react react-component scale
Last synced: about 1 year ago
JSON representation
A React library to keep an element's text scaled to fit it's container
- Host: GitHub
- URL: https://github.com/datchley/react-scale-text
- Owner: datchley
- License: mit
- Created: 2017-03-13T03:38:07.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2019-02-14T07:51:12.000Z (over 7 years ago)
- Last Synced: 2025-03-25T19:14:02.236Z (over 1 year ago)
- Topics: react, react-component, scale
- Language: JavaScript
- Size: 408 KB
- Stars: 56
- Watchers: 2
- Forks: 15
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# React ScaleText Component
[](https://www.npmjs.com/package/react-scale-text)
[](https://coveralls.io/github/datchley/react-scale-text?branch=master)
[](https://travis-ci.org/datchley/react-scale-text)
[](https://github.com/conventional-changelog/standard-version)
`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.
View [demo](https://datchley.github.io/react-scale-text/) page.
# Installation
Install as npm module and then Use via `import` or `require`
```
npm install --save react-scale-text
```
```js
import ScaleText from "react-scale-text";
```
or include the UMD build via script tag from CDN:
```html
```
or, use the minified version, `https://unpkg.com/react-scale-text@latest/lib/react-scale-text.min.js`.
The UMD build makes the component `ScaleText` available globally for use in the script.
# Usage
`ScaleText` wraps a single Element. Upon render it will scale the text (`font-size`) of that element to match the width and height of
the parent element (`ScaleText`'s direct parent). Upon resize of the browser window after the intial render, it will ensure the text is always
scaled to match the parent container's dimensions.
## Example
```jsx
Some text
```
In 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.
## `widthOnly` Example
```jsx
Some text
```
The 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.
## Props
This component takes a single `Element` as a child to render, which is required.
There are two optional props that can be passed.
* **minFontSize** - the minimum font size to scale down to (_floor_) - default `Number.NEGATIVE_INFINITY`
* **maxFontSize** - the maximum font size to scale up to (_ceiling_) - default `Number.POSITIVE_INFINITY`
* **widthOnly** - will scale the element based on the width of it's container only, not the height - default `false`