Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?


Failed to load latest commit information.
Latest commit message
Commit time
December 22, 2022 19:31
January 22, 2023 15:28
December 23, 2022 00:48
January 22, 2023 15:12
January 22, 2023 15:28
December 23, 2022 19:16
January 5, 2023 14:32
January 22, 2023 15:31
January 5, 2023 12:24
December 28, 2022 13:07
December 22, 2022 19:31
January 5, 2023 12:24

React Wrap Balancer - Simple React Component That Makes Titles More Readable


React Wrap Balancer is a simple React Component that makes your titles more readable in different viewport sizes. It improves the wrapping to avoid situations like single word in the last line, makes the content more “balanced”:


To start using the library, install it to your project:

npm i react-wrap-balancer

And wrap text content with it:

import Balancer from 'react-wrap-balancer'

// ...

function Title() {
  return (
      <Balancer>My Awesome Title</Balancer>

If you have multiple <Balancer> components used, it’s recommended (but optional) to also 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'

// ...

function App() {
  return (

For full documentation and use cases, please visit


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.