React ScaleText Component
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 page.
Install as npm module and then Use via
npm install --save react-scale-text
or include the UMD build via script tag from CDN:
or, use the minified version,
The UMD build makes the component
ScaleText available globally for use in the script.
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.
<div ="parent" =><ScaleText><p ="child">Some text</p></ScaleText></div>
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
maxFontSize props, the text will scale infinitely with the
div.parent element as it is resized.
<div ="parent" =><ScaleText =><p ="child">Some text</p></ScaleText></div>
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.
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
- maxFontSize - the maximum font size to scale up to (ceiling) - default
- widthOnly - will scale the element based on the width of it's container only, not the height - default