Dynamic Text Resize Component For React – ScaleText

Category: React , Text | January 10, 2018
Author: datchley
Views Total: 129
Official Page: Go to website
Last Update: January 10, 2018
License: MIT

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:

# NPM
$ npm install react-scale-text --save

Usage:

Import and use it in your app.

import ScaleText from 'react-scale-text';

<ScaleText>
  <p className="child">Some text</p>
</ScaleText>

Adjust the min/max font sizes.

{
  minFontSize: 12,
  maxFontSize: 24,
  widthOnly: false
}

Preview:

ScaleText