clamstew / react-scale-text

A React library to keep an element's text scaled to fit it's container

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.

Installation

Install as npm module and then Use via import or require

npm install --save react-scale-text

import ScaleText from 'react-scale-text';

or include the UMD build via script tag from CDN:

<script src="https://unpkg.com/react-scale-text@latest/lib/react-scale-text.js"></script>

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

<div className="parent" style={{ width: "400px", height: "400px" }}>
  <ScaleText>
    <p className="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 minFontSize or maxFontSize props, the text will scale infinitely with the div.parent element as it is resized.

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