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

React Wrap Balancer

One simple component to make your titles more elegant:

Notice that in “Balanced Title Wrapping” above, every line of wrapped text has almost the same width, so it will likely not to have one single word in a line.

Usage

Install it to your React project:

npm i react-wrap-balancer

And wrap any text with it:

import { Balancer } from 'react-wrap-balancer'

// ...

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

Requirements

This library uses browser and React 18 APIs such as:

• ResizeObserver
• Symbol.for
• useId() hook

License

MIT.