https://react-wrap-balancer.vercel.app/

React
Wrap
Balancer

Simple React Component That Makes Titles More Readable

[55                  ]
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

Installationnpm install react-wrap-balancer

Usageimport Balancer from 'react-wrap-balancer' // ... <h1>
<Balancer>My Title</Balancer> </h1>

Features

  * 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

RequirementsThis library requires React >= 18.0.0, and IE 11 is not
supported.

View project onGitHub

Custom Balance Ratio

[65                  ]

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

[55                  ]
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

[55                  ]
Default

Di Liu Ge Chen Si :Lun Wu Zhi Xing Dong Xi De Cun Zai ;Lun Ren De Ling Hun He Rou Ti Zhi Jian De Shi Zai Qu Bie 

With Balancer

Di Liu Ge Chen Si :Lun Wu Zhi Xing Dong Xi De Cun Zai ;Lun Ren De Ling Hun He Rou Ti Zhi Jian De Shi Zai Qu Bie 

Left aligned, non-latin content

[55                  ]
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

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.

Deployed on