DEV Community

Kartik Chaturvedi
Kartik Chaturvedi

Posted on • Originally published at ikartik.co

 

Using React Wrap Balancer to Make Wrapping Less Awkward

Text wrapping can be pretty unpredictable, especially on smaller screen sizes. Words might be left hanging on the last line, which severely impacts readability and results in some awkward page layouts if left as is. Try showing a headline screenshot like below to a designer, and they will tell you something is off! ;)

Before wrap balancing, the text is simply too top-heavy

At the core is the need to add some sort of x-padding to the h1 text. However, we want it to be dynamic so that it only affects the longer line when the shorter line is too short. This is a problem big enough that Adobe created a jQuery plugin to address this issue. However, performance issues left a lot to be desired.

Later on, The New York Times made their attempt to resolve this issue once and for all, with what eventually became their text-balancer package.

The latest entry in this space is React Wrap Balancer, which works with React 18 and also includes a Provider wrapper to allow code sharing between multiple balancing components across your app.

Using this, headlines look a lot more balanced, don't you think?

After wrap balancing, the text is nicely stacked

There is now also a proposed CSS property called text-wrap which will give developers a JS-free way to control balancing, directly in CSS! Until that is finalized, happy balancing!

Top comments (0)

Top Posts from the React Ecosystem

1. Changes In The Official React Documentation

The former React Docs Beta has been officially released as the updated React documentation at react.dev after years of hard work and refinement. Check out the brand new React Docs: What’s New in the Updated React Docs

2. CRA's Time is Over

React developer team has removed create-react-app (CRA) from official documentation rendering it no longer the default setup method for new projects. The bulky setup, slow, and outdated nature of CRA led to its removal: create-react-app is officially dead

3. How to Fetch Dev.to Articles for Your Portfolio

Integrate the articles of your Dev.to profile into your personal portfolio with either React, Vue, or Next.js by following these simple steps. It outlines how to include frontend to pull the information and correctly utilizes the Dev.to API: How to Fetch Your Dev.to Articles for Your Portfolio with React