You can resize the browser window to see the font-size scale dynamically for any of the examples below. Interactive examples will dynamically resize based on inputs and window resizing.
ScaleText is a React component that allows you to wrap another element or component whose content's font size you want to scale
as the page (
browser window) is resized, or the component's props change.
ScaleText will dynamically set the largest possible font-size that still allows your wrapped element's dimensions not to overflow
it's parent element.
ScaleText simply takes a single child component and will increase the font size of that component until it detects overflow and
then scale it back to fit the element. The scaling will depend on how you style your child components, but any
static or
relatively positioned children should properly size themselves as the font changes.
The parent is the element that contains the
ScaleText wrapped element. For example, you can scale simple text by composing it within
<ScaleText>.
<div className="parent">
<ScaleText>example</ScaleText>
</div>
You can also use a component as the composed child of
ScaleText as well. If you use this method,
ScaleText will pass an extra prop to your component named
fontSize, which will be the numeric font size (
in pixels) that ScaleText is setting for your wrapped component.
<div className="parent">
<ScaleText>
<MyComponent>example</MyComponent>
</ScaleText>
</div>
The
ScaleText component can also maintain line-height between elements when using the
widthOnly prop. This allows the vertical spacing between stacked components to remain consistent as the component scales.
<div className="parent">
<ScaleText widthOnly={true}>
example
</ScaleText>
</div>