Dynamic Text Resize Component For React – ScaleText

Description:

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

Tags:

Add Comment