react-fitmeplz

Install

npm install --save react-fitmeplz
yarn add react-fitmeplz

Usage

import React from "react";
import Fitmeplz from "react-fitmeplz";

function Header() {
  return (
    <div style={{width: "100px", height: "300px"}}>
      <Fitmeplz
        min={10}
        max={100}
        start={50}
        throttle={0}
        step={5}
        hideOnMount={true}
        hideOnCalc={true}
        onStart={() => console.log("Calculating optimal font size!")}
        onEnd={() => console.log("Finished calculating optimal font size!")}
        onFontsize={(size) => console.log(`Current font size is: ${size}`)}
      >
        This is a test!
      </Fitmeplz>
    </div>
  );
}

export default Header;

Props

Name	Type	Default	Description
min	number	1	Minimum font size in pixels.
max	number	300	Maximum font size in pixels.
start	number	100	Font size in pixels when the component first mounts.
throttle	number	0	Throttle (in milliseconds) the rate in which font size is changed and text elements size is compared with its parent.
step	number	1	Font size change in pixels when calculating optimal font size. WARNING! A large value may cause infinite loops.
hideOnMount	boolean	true	Text will be hidden on component mount until font size calculation has finished.
hideOnCalc	boolean	true	Text will be hidden every time a new font size has to be calculated.
onStart	function	() => {}	Function will be called when font size is calculating.
onEnd	function	() => {}	Function will be called when font size has finished being calculated.
onFontsize	function	() => {}	Function will be called every time the font size changes. Will return the new font size in pixels as a string.

License

MIT © NotBaldrick