react-wrap-balancer

What is react-wrap-balancer?

The react-wrap-balancer package is designed to optimize the wrapping of text in React applications. It ensures that text is balanced across lines, improving readability and aesthetics.

What are react-wrap-balancer's main functionalities?

Basic Text Balancing

This feature allows you to wrap text within the WrapBalancer component to ensure it is balanced across lines.

import { WrapBalancer } from 'react-wrap-balancer';

function App() {
  return (
    <WrapBalancer>
      <p>This is a sample text that will be balanced across lines for better readability.</p>
    </WrapBalancer>
  );
}

Custom Balancing Options

This feature allows you to customize the balancing behavior by passing options such as maxWidth to the WrapBalancer component.

import { WrapBalancer } from 'react-wrap-balancer';

function App() {
  return (
    <WrapBalancer options={{ maxWidth: 500 }}>
      <p>This text will be balanced with a maximum width of 500 pixels.</p>
    </WrapBalancer>
  );
}

Other packages similar to react-wrap-balancer

react-line-clamp

The react-line-clamp package allows you to clamp text to a specified number of lines, adding ellipsis if the text exceeds the limit. While it focuses on limiting text to a certain number of lines rather than balancing, it can be used in conjunction with text balancing for better control over text display.

README

Introduction

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”:

Usage

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 (
    <h1>
      <Balancer>My Awesome Title</Balancer>
    </h1>
  )
}

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 (
    <Provider>
      <MyApp/>
    </Provider>
  )
}

For full documentation and use cases, please visit react-wrap-balancer.vercel.app.

About

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.