Simple React Component That Makes Titles More Readable
React: A JavaScript library for building user interfaces
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
import Balancer from 'react-wrap-balancer'
// ...
<h1>
<Balancer>My Title</Balancer>
</h1>
- 0.84 kB Gzipped
- Fast O(log n) algorithm
- Doesn’t cause layout shifts
- SSR and streaming SSR supported
- Next.js 13 app directory and React Server Components compatible
This library requires React ≥ 18.0.0, and IE 11 is not supported.
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}>Adjust the balance ratio to a custom value between 0 (loose) and 1 (compact, the default)
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 the minimum width is reached, each line should approximately have the same width, hence it’ll look more balanced and compact.
Check out the GitHub Repository to learn more.
Use Cases
Useful in tooltips and other UI components
第六個沉思：論物質性東西的存在；論人的靈魂和肉體之間的實在區別
第六個沉思：論物質性東西的存在；論人的靈魂和肉體之間的實在區別
Left aligned, non-latin content
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
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
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.