React Wrap Balancer

Qué es

React Wrap Balancer es un componente de React creado por Shu Ding (autor de SWR y de proyectos del ecosistema de Vercel). Envuelve un texto y reparte automáticamente las palabras entre las líneas para que queden lo más equilibradas posible, evitando que una sola palabra quede colgando en la última línea. Está escrito en TypeScript, se distribuye bajo licencia MIT y se inspira en la propuesta del W3C que dio lugar a la propiedad CSS text-wrap: balance.

Para qué sirve

• Mejorar la legibilidad de titulares, encabezados y textos cortos repartiendo bien las palabras.
• Eliminar las líneas huérfanas (una palabra suelta al final) que aparecen al cambiar el ancho de la pantalla.
• Mantener un diseño tipográfico cuidado en interfaces responsive sin ajustar saltos a mano.
• Servir como solución para navegadores que aún no soportan text-wrap: balance, con la opción de usar el modo nativo cuando sí está disponible.

Cuándo usarlo

Es ideal para títulos, subtítulos y bloques de texto breve en sitios donde la tipografía importa. Hoy existe la propiedad CSS nativa text-wrap: balance, soportada en Chrome 114+, Firefox 121+ y Safari 17.5+ (Baseline 2024), que cubre la mayoría de los casos sin JavaScript. Si tu público usa navegadores modernos, suele bastar con esa propiedad. React Wrap Balancer tiene sentido cuando necesitas soporte en navegadores antiguos, un control más fino del reparto mediante la prop ratio, o un comportamiento consistente independiente del límite de líneas que aplican los navegadores a la versión nativa.

Ejemplo

Instalación y uso básico:

npm i react-wrap-balancer

import Balancer from 'react-wrap-balancer';

function Title() {
  return (
    <h1>
      <Balancer>Mi titular largo que conviene equilibrar bien</Balancer>
    </h1>
  );
}

Con props opcionales: ratio controla la intensidad del equilibrado (0 a 1), as cambia la etiqueta HTML generada y preferNative usa text-wrap: balance del navegador cuando está disponible.

Puntos clave

• Componente ligero centrado en una sola tarea: equilibrar el salto de línea.
• Props configurables: ratio para la intensidad, as para la etiqueta y preferNative para delegar en el navegador.
• Recalcula el reparto al redimensionar usando la API ResizeObserver.
• Escrito en TypeScript, con tipos incluidos y licencia MIT.

Ten en cuenta

Necesita JavaScript en el cliente y la API ResizeObserver (Chrome 64+, Safari 13.1+, Firefox 69+; sin soporte para IE). En navegadores modernos, la propiedad CSS text-wrap: balance ofrece el mismo efecto sin coste de JavaScript, por lo que para proyectos nuevos conviene valorar primero la solución nativa. Ten en cuenta que la versión CSS solo se aplica a bloques con pocas líneas (seis o menos en Chromium, diez o menos en Firefox), pensada para titulares y no para párrafos largos.