Por qué la pluralización es importante en React

A menudo nos encontramos con aplicaciones que muestran mensajes poco naturales como:

Tienes 1 mensaje nuevo

Esta es una señal clara de que un desarrollador no ha pensado detenidamente en la experiencia de usuario.

Las aplicaciones de React a menudo necesitan manejar la pluralización — para contadores de notificaciones, tamaños de listas o resultados de búsqueda. Y no es tan difícil hacer bien la pluralización, especialmente si solo necesitas tu app en inglés. Pero hay muchas malas prácticas en las que caen los desarrolladores nuevos, especialmente al crear interfaces multilingües.

Esta guía cubre cómo manejar correctamente los plurales en inglés, formatear números para distintos locales y crear un sistema de pluralización completamente multilingüe en React y Next.js.

El problema de los plurales codificados manualmente

Muchos proyectos — incluidos algunos sorprendentemente grandes e importantes — codifican manualmente la lógica de plurales.

export default function Example({ n }) {
  return (
    <p>
      Mostrando {n} elemento{n === 1 ? '' : 's'}
    </p>
  )
}

Pero la pluralización suele ser más compleja que simplemente añadir una "s" al final de una palabra. Algunos sustantivos tienen formas plurales irregulares, como "child" y "children". A veces, otras partes de la oración también deben cambiar para reflejar el sustantivo, como "is" y "are", que cambian según el número.

La siguiente tabla ilustra algunos escenarios comunes:

El uso de expresiones condicionales se vuelve inmanejable muy rápidamente.

Y se convierte en una pesadilla cuando necesitas lanzar tu app en otros idiomas. Lo que funciona para inglés a menudo se rompe por completo en idiomas como el polaco o el árabe, que tienen reglas completamente diferentes para manejar cantidades. Las empresas con las que trabajamos a menudo posponen la internacionalización por lo costoso que resulta tener que refactorizar una UI con texto codificado a mano como esta.

Cómo gestionar los plurales en inglés

En inglés, usar los plurales correctos en tu aplicación suele ser sencillo.

Para la pluralización simple de sustantivos, escribe una función auxiliar:

export function pluralize(
  count: number,
  singular: string,
  plural: string = singular + 's'
) {
  return `${count === 1 ? singular : plural}`;
}

Ahora tienes una única función para gestionar toda tu lógica de plurales, y también funciona con plurales irregulares:

pluralize(2, 'user') // "users"
pluralize(2, 'person', 'people') // "people"
pluralize(2, 'child', 'children') // "children"

¿Pero qué pasa si necesitas lógica más compleja, por ejemplo:

"No one is watching"
"1 person is watching"
"2 people are watching"

En este punto, deberías pensar seriamente en una biblioteca de internacionalización ("i18n") de bajo mantenimiento.

Aunque los desarrolladores suelen pensar que las bibliotecas de i18n son solo para interfaces multilingües, también pueden ser muy útiles para formatear plurales y variables incluso en aplicaciones de un solo idioma. Internamente, la mayoría de las bibliotecas de i18n usan la API incorporada Intl.PluralRules de JavaScript para determinar la forma plural correcta para cualquier idioma.

Hay muchas bibliotecas de i18n para React, incluida la nuestra, gt-react (o gt-next si estás usando Next.js). Mostrar un plural en inglés con gt-react es sencillo:

import { Plural } from 'gt-react'

function Example({ count }) {
  return (
    <Plural n={count} zero={'Nadie está viendo'} one={`${count} persona está viendo`}>
      {count} personas están viendo
    </Plural>
  )
}

La UI se renderiza condicionalmente en función del valor de n.

La mayoría de las bibliotecas usan la API Intl.PluralRules de JavaScript para decidir qué forma plural mostrar. Esto significa que, en inglés, se usa el nombre "one" para referirse al singular y "other" para referirse al plural. Nuestro componente <Plural> recurre a sus elementos hijos si el número proporcionado a n no coincide con ninguna de las props proporcionadas.

Usar una biblioteca aquí es una práctica recomendada incluso para aplicaciones únicamente en inglés, y hace que la internacionalización futura sea mucho más sencilla.

Pluralización en apps React multilingües (i18n)

Si tu app solo da servicio a usuarios de habla inglesa, el enfoque anterior puede ser todo lo que necesitas, pero la mayoría de las apps en producción eventualmente tienen que admitir varios idiomas. Ahí es donde las cosas se ponen interesantes.

• En árabe, los sustantivos tienen formas diferentes según si hay cero, uno, dos o muchos
• En español, alemán e italiano, los números grandes usan puntos en lugar de comas, por lo que 1,000,000 se convierte en 1.000.000
• En hindi, las cifras se agrupan en pares, por lo que 1,000,000 se convierte en 10,00,000

En una app internacionalizada, deberías usar una biblioteca i18n específica que tendrá su propia documentación sobre cómo manejar los plurales y el formato de números.

Formatear números para diferentes configuraciones regionales

Puedes usar el objeto Intl para formatear números para cualquier configuración regional. La forma más sencilla de hacerlo es con el método integrado toLocaleString().

De forma predeterminada, usará la configuración regional actual del runtime:

const n = 1000000
n.toLocaleString() // muestra 1,000,000 cuando el locale en tiempo de ejecución es "en-US" (inglés americano)
n.toLocaleString('de') // 1.000.000 porque el locale se ha especificado como "de" (alemán)

gt-react también ofrece un componente <Num> que utiliza Intl.NumberFormat internamente.

import { Num } from 'gt-react'

// muestra 1,000,000 cuando el idioma es "en-US"
// muestra 1.000.000 cuando el idioma es "de"
// muestra 10,00,000 cuando el idioma es "hi"
export default function Example() {
  return <Num>1000000</Num>
}

Comprender las formas plurales en distintos idiomas

Las seis formas plurales compatibles con la API Intl.PluralRules de JavaScript son: zero, one, two, few, many, other. Aunque el inglés usa solo one ("singular") y other ("plural"), idiomas como el árabe y el polaco tienen más que solo estas dos formas.

Por ejemplo, una persona de habla inglesa podría esperar:

"No one is watching"
"1 person is watching"
"2 personas están mirando"

Mientras que un usuario de habla árabe podría esperar expresiones diferentes para las formas singular, dual (cuando la cantidad es exactamente dos elementos) y para los plurales en sus formas reducida y amplia:

"لا أحد يشاهد"
"1 شخص يشاهد"
"2 شخصان يشاهدان"
"3 أشخاص يشاهدون"
"11 شخصاً يشاهدون"

Aquí es donde una biblioteca de internacionalización se vuelve esencial. Cada idioma tiene su propia lógica para cuándo y cómo mostrar plurales, así que es mejor apoyarse en una biblioteca especializada para hacerlo bien.

Una buena biblioteca de i18n hará dos cosas:

1. Decidir qué forma de plural (one, many, other, etc.) usar según la configuración regional
2. Buscar la traducción en el idioma correcto que corresponda a esa forma

Si ya cuentas con una biblioteca de internacionalización, consulta su documentación para obtener información sobre el manejo de plurales. Casi todas las bibliotecas tienen documentación específica sobre cómo representar plurales.

Ejemplo completo: plurales en una aplicación multilingüe de React

Si aún no tienes una biblioteca de internacionalización, considera usar gt-react.

El componente <Plural> de gt-react:

• Es una forma sencilla y declarativa de renderizar los plurales correctamente en React
• Funciona de forma nativa con el componente de formato <Num>
• Funciona de forma nativa con el componente de traducción <T>, que se integra con nuestro servicio de traducción gratuito para generar automáticamente las formas plurales

Juntando todas las piezas, aquí tienes un componente multilingüe completo:

import { T, Plural, Num } from 'gt-react'

// Works out of the box in 100+ languages
function Example({ count }) {
  return (
    <T>
      <Plural
        n={count}
        zero={'No one is watching'}
        one={
          <>
            <Num>{count}</Num> persona está viendo
          </>
        }
      >
        <Num>{count}</Num> people are watching
      </Plural>
    </T>
  )
}

Próximos pasos

¿Listo para gestionar correctamente los plurales en tu app de React? Consulta nuestras guías de inicio rápido:

• Inicio rápido de gt-react para apps de React
• Inicio rápido de gt-next para apps de Next.js
• Referencia de la API de <Plural> para la API completa del componente

La pluralización es uno de los desafíos de i18n más comunes en React: hacerlo bien desde el principio te ahorra tener que hacer refactorizaciones importantes más adelante.