Developing in React involves defining reusable components and assembling them into various parts of your application to achieve your desired user interface (UI). In this article, we’ll look at the
react-textfit library, which makes it easy to create responsive React components that display predictably wherever they appear in a layout.
The Text-fitting Issue
But there are also some downsides to embedding styles within a reusable component. One example is seen in the case of responsiveness. Say you want a line of text — such as a heading — to completely fill the space reserved for it in terms of height and width, but not to wrap — all without having to write custom CSS rules for every possible situation. (Examples of where you might want this include business slogans, advertisement messages, or text embedded in navbar components.)
CSS and portability
While defining the style of your responsive React component, you’d want to take into account the size, layout, or style of each possible parent component that might wrap it to adapt the font size accordingly. As you can imagine, taking every possible container size into account isn’t really viable — even if you could do it with CSS. You’d be chasing far too many viewport scenarios for it to be practical to write media queries. But other than media queries, there isn’t really a way in CSS to ensure that a block of text will always fit within a single line.
Create reusable React components
Thankfully, some React libraries can be used to address this issue effortlessly. They allow you to define reusable React components where text behaves as expected regardless of the container the reusable component is placed in. By the end of this article, you’ll be able to use of these libraries to tackle the aforementioned text fitting problem and make a component reusable. So, let’s take a look at everything you should know to make your text automatically fit the available space in React.
First, we’ll look at why facing such a problem is so important and why common solutions may not be enough, especially when using React. Then, the
react-textfit React library will be presented and used to implement a solution for both single and multi-line text.
Text Fitting Problem in Reusable Components
Let’s take a look at the following demo explaining the text fitting problem with an example.
The goal is to make a headline fit the space reserved for it, regardless of the size of the user’s screen. In this example, viewport units are used to define the
font-size for the headline. Consequently, while resizing the red-bordered
iframe representing the user’s screen, the headline will always fit its parent
<div>. So this method certainly allows the headline text to adapt to any screen width. However, the
Headline styled component is not reusable. This is because it’s designed with only this particular text in mind. By adding to the headline text, or resizing the parent
<div>, the text will no longer fit on one line. (You can experiment with changing the text in the demo.) We really want a reusable component to be more adaptable than this.
As mentioned, another solution is offered by CSS media queries, which allow you to adapt your text font size according to the screen size. This is the ideal solution when considering the web page as a whole. But it’s not practical to chase an endless number of possible container widths with media queries. This would result in a lot of work. Plus, and would make your components a lot less portable.
react-textfit as a Solution for Responsive React Text
So let’s see how the
react-textfit React library makes it possible to automatically fit text within the available space, truly making the component reusable.
As you can see, the aforementioned issues have. Thanks to
react-textfit, you can now change the headline or resize the parent
<div>, while keeping your headline snugly fitting the available space.
Now, let’s see in detail how
As stated in the official GitHub page of the project,
react-textfit is a library for fitting headlines and paragraphs in any reusable components. It efficiently finds the correct fit and works with any CSS style configuration, such as
line-height, and so on.
You can add it to your dependencies by launching the following command:
npm install react-textfit --save
Then you’ll be able to access the
Textfit component to fit any text, as follows:
import Textfit from 'react-textfit';
Textfit will be translated into a
<div> HTML element, and allows you to fit both single-line and multi-line text in any reusable components or HTML elements.
To use it, you only make it wrap text, as follows:
<Textfit> Sample text </Textfit>
Or any HTML element containing, as follows:
<Textfit> <span>Sample text</span> </Textfit>
Textfit is a
<div>, you can pass CSS rules to it through the React
style prop, as follows:
<Textfit style="width": "200px" > Sample text </Textfit>
Or by assigning it to a CSS class through
className, as follows:
<Textfit className="divWidth200" > Sample text </Textfit>
Textfit also comes with a few props that can be used to fit your text as desired. Let’s see them all:
modeis a string that can assume two values:
multi. It defines the method used by the component to fit the text. The
singlemode should be used for headlines, and the
multimode for paragraphs. The default value is
minis a number representing the minimum font size the text is allowed to reach in pixels. The default value is
maxis a number representing the maximum font size the text is allowed to reach in pixels. The default value is
forceSingleModeWidthis a Boolean that’s used only during
singlemode to make the
Textfitcomponent ignore the element’s height completely. The default value is
throttleis a number representing the window resize throttle in milliseconds. The default value is
onReadyis a function that’s called whenever the text is fit.
Two of the most important ones are
max, which allow you to set lower and upper bounds in terms of font size respectively. Then there’s the
mode prop, which defines how the
Textfit component should behave. This requires a more detailed explanation. So, let’s see both modes in action.
How to Fit Single-line Text in Reusable Components
Single-line text is represented by headlines, titles, and labels. It’s usually contained in
<h3>, or in more general
<span> HTML elements. When dealing with single-line text, the fitting problem is almost unavoidable. This is because its font size tends to be much bigger than the one used in paragraphs. When the
single mode is activated by the aforementioned
mode prop in
Textfit, the following algorithm involving a mandatory and an optional step is applied:
1. binary search to fit the element's width 2. if forceSingleModeWidth=false and text overflows height 2a. binary search to also fit the element's height
As explained here, the binary search algorithm is used to retrieve the right font size to make the text contained in the
Textfit component fit its width. Then, if
forceSingleModeWidth is set to
false, the same approach is used — but also taking into account the element’s height.
Making a React component reusable: a single-line demo
Now, let’s see the Textfit
single mode in action through a live demo:
As you can see, by making your text longer, its font size will be updated accordingly by
Textfit to make it match its size. The exact same logic is applied when resizing the text box while maintaining the text constant. This is what would happen with smaller screens. So,
Textfit represents the perfect solution to make headlines and title responsive in any React component or HTML element.
How To Fit Multi-line Text in Responsive React Components
Multi-line text is represented by paragraphs, subtitles, and descriptions. It is usually contained in
<div> HTML elements. The fitting problem with multi-line text is frequent in terms of height. In fact, when dealing with smaller screens, your text will become taller because of the reduced width available. As a result, this might make your text exceed cards or sections with fixed height.
multi mode is activated in
Textfit, the following algorithm involving two mandatory steps is applied:
1. binary search to fit the element's height 2. if text overflows width 2a. binary search to also fit the element's width
The binary search algorithm is used to retrieve the right font size to make the text contained in the
Textfit component fit its height. Then, the same approach is used, but also taking into account the element’s width. As you can see, as opposed to what happens in the
single mode, height has priority over width. This is explained by the reason presented above.
Making a React component reusable: a multi-line demo
Now, let’s see the Textfit
multi mode in action through a live demo:
By interacting with the live demo and making your multi-line text longer, its font size will be updated to make the text fit the HTML element dimension. The same thing happens when resizing the
Textfit component while maintaining the text constant. This is what will happen with smaller screens. So,
Textfit is a good solution to make paragraphs and long descriptions responsive in any HTML element or React component.
Since smartphones and tablets have become the most widely used devices used for accessing the Web, responsiveness has become a problem that can no longer be overlooked. In this article, we’ve looked at a specific problem in this domain. In particular, we’ve explored a particular text fitting problem, why it’s so important to tackle, and how to do it in React.
react-textfit library is a useful, open-source, effective React library that allows you to easily make your text — both single-line and multi-line — fit any React component effortlessly. I hope you found the explanation and demos useful. Thanks for reading! Feel free to reach out to me with any questions, comments, or suggestions.