react-wrap-balancer

Balanced text wrapping for React — prevent awkward single-word last lines in headings and short copy blocks.

react-wrap-balancer

React

Balanced text wrapping for React — prevent awkward single-word last lines in headings and short copy blocks.

npm GitHub Docs

Fit

Bundle (gzip)

1.2 kB

2.2 kB raw

Install size includes transitive dependencies. Bundle size is gzipped browser payload.

Freshness

The Problem

Long headings often wrap leaving a single word dangling on the last line, which looks unprofessional. CSS text-wrap: balance helps but browser support is inconsistent, and it doesn't work for all layout scenarios.

What It Does

<Balancer> wraps any text element and uses a tiny binary-search algorithm to reduce the width of the text until the last line is as wide as possible — eliminating awkward orphans. The script is < 1KB and only runs after hydration.

Installation

bash

npm install react-wrap-balancer

Usage Example

tsx

import Balancer from 'react-wrap-balancer';

export function Hero() {
  return (
    <section>
      <h1>
        <Balancer>
          The Quick Brown Fox Jumps Over the Lazy Dog Near the River
        </Balancer>
      </h1>
      <p>
        <Balancer ratio={0.5}>
          This subheading also benefits from balanced wrapping on smaller screens.
        </Balancer>
      </p>
    </section>
  );
}

Related packages

cmdkReact

Fast, composable command palette for React — keyboard-driven search UI with fuzzy filtering and accessible markup out of the box.

@dnd-kit/coreReact

Modern, accessible drag-and-drop toolkit for React — fully customizable with keyboard support, collision detection, and zero dependencies.

embla-carousel-reactReact

Lightweight, extensible carousel library for React — smooth scrolling, touch/mouse drag, and full CSS control without prescribing markup.

flagsReact

Provider-agnostic feature flags SDK for Next.js and React — toggle features without redeploying.

framer-motionReact

Production-ready declarative animation library for React — gestures, layout animations, and scroll-driven effects with a clean API.