react-auto-text

A React component for autosizing text within a set container size

Usage no npm install needed!

<script type="module">
  import reactAutoText from 'https://cdn.skypack.dev/react-auto-text';
</script>

README

react-auto-text

npm

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