@plutonium-js/react-fit-text

React component that automatically fits the text to the element size. Ultra lightweight and efficient.

Usage no npm install needed!

<script type="module">
  import plutoniumJsReactFitText from 'https://cdn.skypack.dev/@plutonium-js/react-fit-text';
</script>

README

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

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:

License

Released under the MIT license

Author: Jesse Dalessio / Plutonium.dev

:arrow_up_small: