react-auto-text

react-auto-text

AutoText is a React component that allows you to have dynamic text sizing to fit inside of a component with a set height.

Install

$ npm install --save react-auto-text

Usage

import React from 'react';
import AutoText from 'react-auto-text';

function MyComponent() {
  return (
    <AutoText
      maxHeight={200}
      maxFontSize={20}
      minFontSize={10}
      onChange={fontSize => console.log(fontSize)}>
        Bacon ipsum dolor amet filet mignon salami andouille corned beef.
    </AutoText>
  );
}

export default MyComponent;

API

<AutoText>

• maxHeight (number) Max height of the container you wish to fill. Default 100
• maxFontSize (number) Maximum font size in pixels. Default 20
• minFontSize (number) Minimum font size in pixels. Default 10
• onChange (function) Optional function called when text size changes.

License

MIT