# General Translation React SDKs (gt-react, gt-next): Plural
URL: https://generaltranslation.com/es/docs/react/reference/components/plural.mdx
---

title: Plural
description: Renderiza contenido en función de un recuento usando las reglas de plural de la configuración regional activa con General Translation gt-react. Referencia de la API para Plural.

---

El componente `<Plural>` adapta una frase en función de un recuento, usando las reglas de plural de la configuración regional activa. Selecciona la forma correcta para un número: el inglés necesita dos (&quot;one item&quot; / &quot;two items&quot;), mientras que otros idiomas pueden necesitar hasta seis.

*Disponible en `gt-react`, `gt-next`, `gt-tanstack-start` y `gt-react-native`. Los ejemplos se importan desde `gt-react`; en su lugar, importa desde el paquete de tu framework.*

## Descripción general [#overview]

Pasa el conteo como `n` y proporciona la prop `child` para cada forma plural.

```tsx
<Plural
  n={count}
  one={<>You have one item.</>}
  other={<>You have some items.</>}
/>
```

*Nota: coloca `<Plural>` dentro de un [`<T>`](/docs/react/reference/components/t) para traducir sus ramas y envuelve los valores dinámicos dentro de ellas en un componente de variable como [`<Num>`](/docs/react/reference/components/num).*

## Cómo funciona [#how-it-works]

* **Selección según la configuración regional.** El valor de `n` se asigna a una categoría de plural según las [reglas de plural de Unicode CLDR](https://cldr.unicode.org/index/cldr-spec/plural-rules) de la configuración regional activa. Se renderiza la rama de esa categoría.
* **Contenido alternativo.** Si no existe una rama coincidente, `children` se renderiza como contenido alternativo.
* **Usa contenido alternativo cuando no hay número.** Si falta `n` o no es un número válido, `<Plural>` renderiza `children` como contenido alternativo en lugar de lanzar un error.

## Qué formas añadir [#forms]

Solo necesitas las formas de plural que use tu idioma. Las formas posibles son `zero`, `one`, `two`, `few`, `many`, `other`, además de los aliases `singular`, `dual` y `plural`.

* En `en-US`, usa `one` y `other` (o `singular` y `plural`).
* En `zh-CN`, solo hace falta `other`.

Consulta las [reglas de plural de CLDR](https://cldr.unicode.org/index/cldr-spec/plural-rules) para ver las formas de cada idioma.

## Props [#props]

| Prop                    | Descripción                                                                      | Type        | Opcional | Predeterminado                |
| ----------------------- | -------------------------------------------------------------------------------- | ----------- | -------- | ----------------------------- |
| [`n`](#n)               | El número que selecciona la forma plural.                                        | `number`    | No       | —                             |
| [`children`](#children) | Contenido alternativo si no coincide ninguna rama.                               | `ReactNode` | Sí       | —                             |
| [`locales`](#locales)   | Configuración regional que reemplaza la activa para las reglas de plural. | `string[]`  | Sí       | configuración regional activa |
| [`[form]`](#form)       | Contenido para una categoría de plural.                                          | `ReactNode` | Sí       | —                             |

### `n` [#n]

**Tipo** `number` · **Obligatorio**

El número que se usa para determinar la forma plural. Si falta o no es un número válido, `<Plural>` renderiza `children` como contenido alternativo en lugar de lanzar un error.

### `children` [#children]

**Tipo** `ReactNode` · **Opcional**

Contenido alternativo que se muestra cuando ninguna rama plural coincide con `n`.

### `locales` [#locales]

**Tipo** `string[]` · **Opcional** · **Predeterminado** Configuración regional activa

Configuraciones regionales cuyas reglas de plural se aplican. Si se omite, se usa la configuración regional activa.

### `[form]` [#form]

**Type** `ReactNode` · **Opcional**

Una propiedad por categoría de plural: `zero`, `one`, `two`, `few`, `many`, `other` (o los alias `singular`, `dual` y `plural`). Las categorías disponibles dependen de la configuración regional.

## Ejemplos [#examples]

```tsx title="BasicExample.tsx"
import { Plural } from 'gt-react';

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

```tsx title="FallbackExample.tsx"
import { Plural } from 'gt-react';

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

```tsx title="PluralExample.tsx"
import { T, Plural, Num } from 'gt-react';

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

## Notas [#notes]

* `<Plural>` se encarga de la pluralización según la configuración regional activa.
* Las ramas disponibles dependen de la configuración regional y siguen las [reglas de plural de Unicode CLDR](https://cldr.unicode.org/index/cldr-spec/plural-rules).
* Consulta [`<Branch>`](/docs/react/reference/components/branch) para la ramificación basada en valores arbitrarios.