Simple React Component That Makes Titles More Readable

Default

React: A JavaScript library for building user interfaces

With Balancer

React: A JavaScript library for building user interfaces

React Wrap Balancer avoids single hanging word on the last line

Getting Started

npm install react-wrap-balancer

The simplest way is to wrap the text content with <Balancer>:import Balancer from 'react-wrap-balancer' // ... <h1> <Balancer>My Title</Balancer> </h1>If you have multiple <Balancer> components used, it’s recommended (but optional) to use <Provider> to wrap the entire app. This will make them share the re-balance logic and reduce the HTML size:import { Provider } from 'react-wrap-balancer' // ... <Provider> <App/> </Provider>

This library requires React ≥ 16.8.0, and IE 11 is not supported.

View project onGitHub

Custom Balance Ratio

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

<Balancer ratio={0.65} preferNative={false}>

Adjust the balance ratio to a custom value between 0 (loose) and 1 (compact, the default)

Note that if the native CSS balance (text-wrap: balance) is available, React Wrap Balancer will use it instead. And the `ratio` option will be ignored in that case. You can provide the `preferNative` option to opt out.

How Does It Work?

React Wrap Balancer reduces the width of the content wrapper as much as it could, before causing an extra line break. When reaching the minimum width, each line will approximately have the same width, and look more compact and balanced.

Check out the GitHub Repository to learn more.

Use Cases

Default
This deployment is currently in progress. Read more.
With Balancer
This deployment is currently in progress. Read more.

Useful in tooltips and other UI components

Default

第六個沉思:論物質性東西的存在;論人的靈魂和肉體之間的實在區別

With Balancer

第六個沉思:論物質性東西的存在;論人的靈魂和肉體之間的實在區別

Left aligned, non-latin content

Default
You have wakened not out of sleep, but into a prior dream, and that dream lies within another, and so on, to infinity, which is the number of grains of sand. The path that you are to take is endless, and you will die before you have truly awakened.
- Jorge Luis Borges
With Balancer
You have wakened not out of sleep, but into a prior dream, and that dream lies within another, and so on, to infinity, which is the number of grains of sand. The path that you are to take is endless, and you will die before you have truly awakened.
- Jorge Luis Borges

Makes multi-line content more compact with fewer visual changes when resizing

Performance Impact

It is worth to mention that this project is a workaround for the lack of native support for balanced text wrapping in CSS. It is not perfect as it adds some performance overhead. However, the performance impact is usually very trivial and can be ignored in most cases.

The following benchmark (source) is done by measuring the script execution time of X balanced titles when loading the webpage (raw data):

Benchmark result

It shows that when there are less than 100 elements with React Wrap Balancer in the initial HTML, the per-element impact to the page load time is less than 0.25 ms. When there are 1,000 elements, that number increases to ~1 ms. When there are 5,000 elements, the per-element script execution time becomes ~7 ms.

These numbers don’t scale linearly because re-layouts usually have an impact to other elements on the page. Hence the best practice is to only use this library for title elements when necessary, or use it for content that is behind user interactions (e.g. tooltips), to avoid negative impacts to the page performance.

About React Wrap Balancer

This project was inspired by Adobe’s balance-text project, NYT’s text-balancer project, and Daniel Aleksandersen’s Improving the New York Times’ line wrap balancer. If you want to learn more, you can also take a look at the text-wrap: balance proposal.

Special thanks to Emil Kowalski for testing and feedback. Created by Shu Ding in 2022, released under the MIT license.