<Plural>

Descripción general

Usamos el componente <Plural> para manejar la conjugación de oraciones. Piensa en la diferencia entre las oraciones: "Tienes un artículo." y "Tienes dos artículos."

En inglés, tienes que definir dos oraciones diferentes según la cantidad de artículos. En otros idiomas, tienes que definir hasta seis.

const count = 1;
<Plural n={count}
  singular={You have one item.}
  plural={You have some items.}
/>

Referencia

Props

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

Descripción

Retorna

JSX.Element que contiene el contenido correspondiente a la forma plural de n, o el contenido alternativo.

Lanza

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

¿Qué formas debo agregar?

Solo necesitas usar las formas plurales en tu idioma.

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

• Si eres un desarrollador que usa "en-US", solo usa dos: "singular" y "plural".
• Si eres un desarrollador en "zh-CN", solo usa "other".

Lee más sobre las diferentes formas aquí.

Ejemplos

Uso básico

Utiliza el componente <Plural> para manejar la pluralización.

import { Plural } from 'gt-next';

export default function ItemCount({ count }) {
  return (
    <Plural n={count} 
      singular={You have one item.}
      plural={You have some items.}
    />
  );
}

Alternativas

Puedes proporcionar una alternativa en caso de que el valor pasado a n no tenga ramas coincidentes.

import { Plural } from 'gt-next';

export default function ItemCount({ count }) {
  return (
    <Plural n={count}
      singular={You have one item.}
    >
      You have some items. // [!code highlight]
    </Plural>
  );
}

Traduciendo plurales

Todo lo que tienes que hacer para traducir es agregar el componente <T>.

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

export default function ItemCount({ count }) {
  return (
  <T id="itemCount">
    <Plural n={count}
      singular={You have an item.} 
      plural={You have some items.} 
    />
  );
}

Agregando variables

¿Qué pasa si queremos agregar algunas variables a la frase pluralizada?

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

export default function ItemCount({ count }) {
  return (
    <Plural n={count}
      singular={You have <Num>{count}</Num> item.} 
      plural={You have <Num>{count}</Num> items.} 
    />
  );
}

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

<T id="itemCount">
  <Plural n={count}
    singular={You have <Num>{count}</Num> item.} 
    plural={You have <Num>{count}</Num> items.} 
  />
</T>

Notas

• El componente <Plural> se utiliza para manejar la pluralización.
• Las ramas plurales disponibles (por ejemplo, one, other, few, many) dependen de la configuración regional y siguen las reglas de pluralización de Unicode CLDR.

Próximos pasos

• Para más ejemplos, consulta el documento de referencia sobre componentes de ramificación aquí.
• Para un uso más avanzado, combina <Plural> con componentes de variable como <Currency>, <DateTime>, <Num> y <Var>. Lee más sobre componentes de variable aquí.

Para profundizar en la pluralización y la ramificación, visita Uso de componentes de ramificación.