// the find
shuding/react-wrap-balancer
Simple React Component That Makes Titles More Readable
A React component that balances line lengths in headings and short text blocks, avoiding the awkward single-word orphan on the last line. It uses a binary search algorithm to find the optimal container width, with a fallback to the native CSS `text-wrap: balance` when the browser supports it. Aimed at anyone who cares that their marketing copy or blog titles don't look sloppy at different viewport widths.
The `preferNative` prop means modern browsers skip the JS entirely and use the CSS property directly — the component degrades itself out of existence as platform support improves. The `<Provider>` pattern is a nice touch: it injects the resize/rebalance logic once into the page rather than once per component, so you're not paying the HTML weight cost repeatedly in SSR output. The `ratio` prop gives you an escape hatch when full balancing looks too aggressive. The implementation is genuinely tiny — two source files.
This is a solved problem in modern browsers: `text-wrap: balance` shipped in Chrome 114, Firefox 121, and Safari 17.5, covering the vast majority of users today. The JS fallback is only relevant if you're targeting Safari 16 or older. The repo itself seems to know this — last commit is March 2026 and it's clearly in maintenance mode with 65 forks for 4k stars, which suggests people star it but don't contribute. Also worth noting: the binary search approach causes a layout reflow on every resize, which is fine for a heading but you'd feel it if someone tried to use this on a dense content-heavy page.