Dynamic Text Resize Component For React – ScaleText

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

Download Details:

Author: datchley

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/datchley/react-scale-text

License: MIT

You Might Be Interested In:

Tags:

Add Comment