timtong1982/auto-fontsize

auto-fontsize

This React component is used for limit text in the certain line(s) by shrink the font size.

Install

npm i auto-fontsize --save

Usage

import {AutoFontSize} from 'auto-fontsize

Parameters

Propery	Type	Optional	Default	Note
text	string	False	N/A	Text to display
fontSizeMapping	IFontSizeLineHeightMapping []	True	undefined	define Array of IFontSizeLineHeightMapping to execute the defined step sizing
textSize	number	True	N/A	Start font size, if null, will use the inherit value from parent element
minTextSize	number	True	2	Minimum text size to try on auto sizing
lineHeightRatio	number or string	True	'normal'	line height setting for auto sizing
tetextSizeStepxt	number	True	2	Decrease step of font size when auto sizing
targetLines	number	True	1	Target maximum lines when auto sizing
targetElementType	'div' or 'p' or 'span'	True	'div'	Target container to put the auto sizing text
ellipsisOverflow	boolean	True	false	Show ellipsis ... when text is overflow

IFontSizeLineHeightMapping

interface IFontSizeLineHeightMapping {
    fontSize: number;
    lineHeight: number | string | 'normal';
}

Use auto sizing

<AutoFontSize
            text="The quick brown fox jumps over the lazy dog"
            minTextSize={16}
            textSize={28}
            textSizeStep={2}
            targetLines={1}
        />

Use defined step auto sizing

<AutoFontSize
    text="The quick brown fox jumps over the lazy dog"
     fontSizeMapping={[
         { fontSize: 28, lineHeight: '31px' },
         { fontSize: 16, lineHeight: '19px' }
         ]}
            />