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

Links

• Fit Text Home
  • Documentation
  • API

Bookmarks

• Installation
• Usage
  • Module
  • CDN Script Tags
• Create Component
• Optional Properties
• Styling
• License

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:

License

Released under the MIT license

Author: Jesse Dalessio / Plutonium.dev

:arrow_up_small: