Ok, this is *very* cool. “React Wrap Balancer”, a React component for creating balanced text. By @shuding_ at @vercel.
Avoid awkward hanging characters ("widows") by wrapping text in a <Balancer> component.
→ react-wrap-balancer.vercel.app
Avoid awkward hanging characters ("widows") by wrapping text in a <Balancer> component.
→ react-wrap-balancer.vercel.app
With stuff like this, my first thought is always “But what about SSR?”.
Packages like this typically run on the client, *after* rehydration. This leads to an awkward flicker where the text "rebalances" a second or two after the page loads.
This package works flawlessly 💯
Packages like this typically run on the client, *after* rehydration. This leads to an awkward flicker where the text "rebalances" a second or two after the page loads.
This package works flawlessly 💯
It works by inlining a script in the HTML, similar to the technique I share in “The Quest for the Perfect Dark Mode” (joshwcomeau.com/react/dark-mod…).
It's very clever. @shuding_'s work is always immaculate.
It's very clever. @shuding_'s work is always immaculate.
Hopefully in the future, text balancing will be supported natively in the browser, and we won't need clever workarounds like this. But in the meantime, this is the best tool I've seen for solving this problem in a React context 💯
• • •
Missing some Tweet in this thread? You can try to
force a refresh
