A React component which decreases the size of its text content as more text is added. It allows for granular control over how it should scale down.
Switch branches/tags
Nothing to show
Clone or download
Latest commit ed31081 Aug 11, 2017

README.md

React Text Resize

Control the size of your paragraphs based on their length. Shorter lines will start at the max size, then decrease in size until the maximum number of characters (capAt) is reached; at which point it will use the min size and stop decreasing.

See the demo page on Codepen

Installation

npm install react-text-resize

Usage

The component accepts DOM elements as children to count its number of characters:

<TextFit className="optional-classes" min="16" max="46" capAt="150">
   <p>“Wise quotes are shorter”</p>
</TextFit>

min: (int) — Minimum desired font size (in pixels) max: (int) — Maximum desired font size (in pixels) capAt: (int) — Number of characters where the text reaches its minimum size limit