View Source

FittedText

Fit given text inside a parent container, obeying implict and explicit constraints.

This component can be useful in situations where an internationalized string is being placed into the UI and it's unclear if all variations of it will fit without excessive amounts of edge-case CSS. Ultimately, it's good at making sure what you put in doesn't overflow.

Installation#

npm i --save boundless-fitted-text

FittedText can also just be directly used from the main Boundless library. This is recommended when you're getting started to avoid maintaining the package versions of several components:

npm i boundless --save

the ES6 import statement then becomes like:

import { FittedText } from 'boundless';

Demo

Show Implementation

Props#

Required Props#

There are no required props.

Optional Props#

NameImplementationDescription
*
Expects
any

any React-supported attribute

component
Expects
string
Default Value
'span'

any valid HTML tag name

upscale
Expects
bool
Default Value
false

controls if FittedText will automatically scale up the content to fit the available space; normally the component only scales text down as needed to fit