@plutonium-js/react-fit-text NPM

Plutonium react fit text component

About

An ultra lightweight React component that automatically fits text to the size of the element. Works with any added content or styling and includes a host of advanced features...

Supports single lines or paragraphs
Add any descendant content or React components
Optional auto update on resize
Optional resize update delay
Supports 'id', 'className', and 'style' props
Optional min and max font size

Bookmarks

Installation

> npm install @plutonium-js/react-fit-text

:arrow_up_small:

Usage

Module In ES6 the code example below imports the Fit Text component.

import FitText from '@plutonium-js/react-fit-text';

Or when using CommonJS...

const {FitText} = require('@plutonium-js/react-fit-text');

CDN Script Tag Add the component directly to a web page.

<script src="https://cdn.jsdelivr.net/npm/@plutonium-js/react-fit-text@1/dist/bundle.js"></script>

:arrow_up_small:

Create Component

To create a basic fit text component add the 'FitText' tag to your JSX.

class App extends Component {
   render() {
      return (
         <FitText>Add your text to fit here.</FitText>
      );
   }
}

:arrow_up_small:

Optional Properties

Add properties as needed (all properties are optional).

class App extends Component {
   render() {
      return <FitText
         minSize = {20}
         maxSize = {200}
         updateOnResize = {{
            delay:0
         }}
         id = "myId"
         className = "myClassNames"
         style = {{
            myStyle:'myStyleValue'
	     }}
      >Add your text to fit here.</FitText>;
   }
}

Min and max size is in pixels. The delay is in milliseconds. The 'id', 'className', and 'style' props are added to the components root element.

:arrow_up_small:

Styling

The component has a default class name of 'FitText' which can be used to style the root element.

.FitText {position:relative;height:100%;}

The 'id', 'className', and 'style' props are added to the components root element.

render() {
   return <FitText
      id = "myId"
      className = "myClassNames"
      style = {{
		myStyle:'myStyleValue'
	  }}
   >Add your text to fit here.</FitText>;
}

:arrow_up_small: