Descripción general

Usamos el componente <Plural> para gestionar la pluralización de oraciones. Piensa en la diferencia entre: "You have one item." y "You have two items."

En inglés, debes definir dos oraciones diferentes según el número de elementos. En otros idiomas, puedes llegar a definir hasta seis.

const count = 1;
<Plural n={count}
  singular={Tienes un elemento.}
  plural={Tienes algunos elementos.}
/>

Referencias

Props

La sintaxis [key]: string indica claves arbitrarias que representan posibles ramas de pluralización. Por ejemplo, se pueden añadir ramas como singular y plural como parámetros.

Descripción

Devuelve

JSX.Element que contiene el contenido correspondiente a la forma plural de n o el contenido de respaldo predeterminado.

Lanza

Error si no se proporciona n o si no es un número válido.

¿Qué formas debo añadir?

Solo necesitas usar las formas de plural de tu idioma.

Las formas posibles son: "singular", "plural", "dual", "zero", "one", "two", "few", "many", "other".

• Si eres desarrollador y usas "en-US", utiliza solo dos: "singular" y "plural".
• Si eres desarrollador en "zh-CN", utiliza solo "other".

Lee más sobre las distintas formas aquí.

Ejemplos

Uso básico

Usa el componente <Plural> para gestionar la pluralización.

import { Plural } from 'gt-react';

export default function ItemCount({ count }) {
  return (
    <Plural n={count} 
      singular={Tienes un elemento.}
      plural={Tienes varios elementos.}
    />
  );
}

Contenidos de respaldo

Puedes proporcionar un contenido de respaldo predeterminado en caso de que el value pasado a n no coincida con ninguna rama.

import { Plural } from 'gt-react';

export default function ItemCount({ count }) {
  return (
    <Plural n={count}
      singular={Tienes un elemento.}
    >
      Tienes algunos elementos. // [!code highlight]
    </Plural>
  );
}

Traducción de plurales

Lo único que tienes que hacer para traducir es añadir el componente <T>.

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

export default function ItemCount({ count }) {
  return (
  <T id="itemCount">
    <Plural n={count}
      singular={Tienes un elemento.} 
      plural={Tienes varios elementos.} 
    />
  );
}

Añadir variables

¿Qué tal si queremos añadir algunas variables a la frase en plural?

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

export default function ItemCount({ count }) {
  return (
    <Plural n={count}
      singular={Tienes <Num>{count}</Num> elemento.} 
      plural={Tienes <Num>{count}</Num> elementos.} 
    />
  );
}

Cuando estés dentro de un componente <T>, envuelve todo el contenido dinámico con <Currency>, <DateTime>, <Num> o <Var>.

<T id="itemCount">
  <Plural n={count}
    singular={Tienes <Num>{count}</Num> elemento.} 
    plural={Tienes <Num>{count}</Num> elementos.} 
  />
</T>

Notas

• El componente <Plural> se usa para gestionar la pluralización.
• Las ramas/pliegues de plural disponibles (p. ej., one, other, few, many) dependen del locale y siguen las reglas de pluralización de Unicode CLDR.

Próximos pasos

• Para ver más ejemplos, consulta la documentación de referencia sobre branching de componentes aquí.
• Para un uso más avanzado, combina <Plural> con componentes de Variable como <Currency>, <DateTime>, <Num> y <Var>. Lee más sobre los componentes de Variable aquí.