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
Table of Contents
Since React components are pieces of JavaScript code describing a particular section of your UI, they’re virtually independent of each other. And their visual styles are often embedded within them, as part of their definition. This can be quite helpful, given that they’re likely to be used in different locations and layouts.
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.
See the Pen Text fitting problem by SitePoint (@SitePoint)
on CodePen.
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.
See the Pen Text fitting problem with react-textfit by SitePoint (@SitePoint)
on CodePen.
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.
Continue reading How to Create Responsive React Components with React Textfit on SitePoint.
