Por qué es importante la pluralización en React

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

Tienes 1 mensaje(s) nuevo(s)

Esta es una señal clara de un desarrollador que no ha reflexionado bien sobre la experiencia de usuario.

Las aplicaciones de React suelen necesitar gestionar la pluralización: para recuentos de notificaciones, longitud de listas o resultados de búsqueda. Y acertar con la pluralización no es tan difícil, sobre todo si tu aplicación solo tiene que funcionar en inglés. Pero hay muchas malas prácticas en las que caen los desarrolladores novatos, especialmente al crear interfaces multilingües.

Esta guía explica cómo gestionar correctamente los plurales en inglés, dar formato a los números para distintas configuraciones regionales y crear un sistema de pluralización totalmente multilingüe en React y Next.js.

El problema de las formas plurales codificadas manualmente

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

export default function Example({ n }) {
  return (
    <p>
      Displaying {n} item{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 concordar con el sustantivo, como "is" y "are" según la cantidad.

La siguiente tabla ilustra algunos casos comunes:

Usar expresiones condicionales se vuelve inmanejable rápidamente.

Y se convierte en una pesadilla cuando necesitas publicar tu aplicación en otros idiomas. Lo que funciona en inglés a menudo deja de funcionar por completo en idiomas como el polaco o el árabe, que tienen reglas totalmente distintas para expresar cantidades. Las empresas con las que trabajamos suelen posponer la internacionalización por lo difícil que resulta refactorizar una interfaz con textos codificados de esta forma.

Cómo manejar los plurales en inglés

En inglés, usar las formas plurales correctas en tu aplicación suele ser sencillo.

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

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

Ahora hay una sola función para gestionar toda la lógica de pluralización, 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 una lógica más compleja, como:

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

En esta etapa, deberías considerar seriamente usar una biblioteca de internacionalización ("i18n") de bajo mantenimiento.

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

Hay muchas bibliotecas de i18n para React, incluida la nuestra, gt-react (o gt-next si usas 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={'No one is watching'} one={`${count} person is watching`}>
      {count} people are watching
    </Plural>
  )
}

La interfaz de usuario se renderiza de forma condicional según el 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, usarías el nombre "one" para referirte al singular y "other" para referirte al plural. Nuestro componente <Plural> recurre a sus elementos secundarios si el número proporcionado en n no coincide con ninguna de las propiedades proporcionadas.

Usar una biblioteca aquí es una práctica recomendada incluso para aplicaciones solo en inglés, y facilita mucho la internacionalización en el futuro.

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

Si tu aplicación solo está orientada a usuarios angloparlantes, puede que el enfoque anterior sea todo lo que necesites, pero la mayoría de las aplicaciones en producción acaban necesitando compatibilidad con varios idiomas. Ahí es donde las cosas se ponen interesantes.

• En árabe, los sustantivos tienen distintas formas según haya cero, uno, dos o muchos
• En español, alemán e italiano, los números grandes usan puntos en lugar de comas, así que 1,000,000 se convierte en 1.000.000
• En hindi, los dígitos se agrupan de dos en dos, así que 1,000,000 se convertiría en 10,00,000

Para una aplicación internacionalizada, debes usar una biblioteca de i18n específica, que tendrá su propia documentación sobre cómo gestionar las formas plurales y el formato de números.

Formatear números para distintas 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 incorporado toLocaleString().

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

const n = 1000000
n.toLocaleString() // muestra 1,000,000 cuando la configuración regional del runtime es "en-US" (inglés americano)
n.toLocaleString('de') // 1.000.000 porque la configuración regional se especificó 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>
}

Cómo entender 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 solo usa one ("singular") y other ("plural"), idiomas como el árabe y el polaco tienen más de dos formas.

Por ejemplo, un usuario angloparlante podría esperar:

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

Mientras que un usuario arabófono podría esperar expresiones distintas para el singular, el dual (cuando la cantidad es exactamente de dos elementos) y las formas de plural para cantidades pequeñas y grandes:

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

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

Una buena biblioteca de i18n hará dos cosas:

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

Si ya tienes una biblioteca de internacionalización, consulta su documentación para ver cómo manejar el formato de plurales. Casi todas las bibliotecas tienen documentación específica sobre cómo mostrar plurales.

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

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

El componente <Plural> de gt-react:

• Es una forma simple y declarativa de renderizar correctamente los plurales 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

Uniendo todos los elementos, aquí tienes un componente multilingüe completo:

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

// Funciona de inmediato en más de 100 idiomas
function Example({ count }) {
  return (
    <T>
      <Plural
        n={count}
        zero={'No one is watching'}
        one={
          <>
            <Num>{count}</Num> person is watching
          </>
        }
      >
        <Num>{count}</Num> people are watching
      </Plural>
    </T>
  )
}

Siguientes pasos

¿Listo para gestionar correctamente las formas plurales en tu aplicación de React? Consulta nuestras guías de inicio rápido:

• guía de inicio rápido de gt-react para aplicaciones de React
• guía de inicio rápido de gt-next para aplicaciones de Next.js
• referencia de la API de <Plural> para ver 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 ahorrará refactorizaciones importantes más adelante.