Autor:

Creación:2026-05-04Última actualización:2026-05-04

Referencia esta doc a tu asistente AI favoritoChatGPT Claude DeepSeek Google AI mode Gemini Perplexity Mistral Grok

Haz tu pregunta y obtén un resumen del documento referenciando esta página y el proveedor AI de tu elección

Historial de versiones

"Init history"
v8.8.04/5/2026

El contenido de esta página ha sido traducido con una IA.

Ver la última versión del contenido original en inglés

Editar esta documentación

Si tienes una idea para mejorar esta documentación, no dudes en contribuir enviando una pull request en GitHub.

Enlace de GitHub a la documentación

Copiar

Copiar el Markdown del documento a la portapapeles

Contenido en Plural / El plural en Intlayer

Name: Intlayer
Author: Intlayer

Cómo funciona el plural

To use plural content inside a React component, retrieve it via the useIntlayer hook and call it with a count. The active locale and the count are combined to pick the matching CLDR category.

**/*.tsx

Copiar código

Copiar el código al portapapeles

import type { FC } from "react";
import { useIntlayer } from "react-intlayer";

const OpeningsComponent: FC<{ count: number }> = ({ count }) => {
const { totalOpenings } = useIntlayer("total_openings");

return (
  <div>
    <p>{totalOpenings(count)}</p>
  </div>
);
};

export default OpeningsComponent;

To use plural content in Next.js Client Components, retrieve it via the useIntlayer hook and call it with a count. Here's an example:

**/*.tsx

Copiar código

Copiar el código al portapapeles

"use client";

import type { FC } from "react";
import { useIntlayer } from "next-intlayer";

const OpeningsComponent: FC<{ count: number }> = ({ count }) => {
const { totalOpenings } = useIntlayer("total_openings");

return (
  <div>
    <p>{totalOpenings(count)}</p>
  </div>
);
};

export default OpeningsComponent;

To use plural content in Vue components, retrieve it via the useIntlayer hook and call it with a count. Here's an example:

**/*.vue

Copiar código

Copiar el código al portapapeles

<script setup lang="ts">import { useIntlayer } from "vue-intlayer";defineProps<{ count: number }>();const { totalOpenings } = useIntlayer("total_openings");</script><template><div>  <p>{{ totalOpenings(count) }}</p></div></template>

To use plural content in Svelte components, retrieve it via the useIntlayer hook and call it with a count. The store is accessed with $. Here's an example:

**/*.svelte

Copiar código

Copiar el código al portapapeles

<script lang="ts">import { useIntlayer } from "svelte-intlayer";export let count: number;const content = useIntlayer("total_openings");</script><div><p>{$content.totalOpenings(count)}</p></div>

To use plural content in Preact components, retrieve it via the useIntlayer hook and call it with a count. Here's an example:

**/*.tsx

Copiar código

Copiar el código al portapapeles

import type { FC } from "preact";
import { useIntlayer } from "preact-intlayer";

const OpeningsComponent: FC<{ count: number }> = ({ count }) => {
const { totalOpenings } = useIntlayer("total_openings");

return (
  <div>
    <p>{totalOpenings(count)}</p>
  </div>
);
};

export default OpeningsComponent;

To use plural content in SolidJS components, retrieve it via the useIntlayer hook and call it with a count. Here's an example:

**/*.tsx

Copiar código

Copiar el código al portapapeles

import type { Component } from "solid-js";
import { useIntlayer } from "solid-intlayer";

const OpeningsComponent: Component<{ count: number }> = (props) => {
const { totalOpenings } = useIntlayer("total_openings");

return (
  <div>
    <p>{totalOpenings(props.count)}</p>
  </div>
);
};

export default OpeningsComponent;

To use plural content in Angular components, retrieve it via the useIntlayer hook and call it with a count. Here's an example:

app.component.ts

Copiar código

Copiar el código al portapapeles

import { Component, Input } from "@angular/core";import { useIntlayer } from "angular-intlayer";@Component({selector: "app-openings",template: `  <div>    <p>{{ content().totalOpenings(count) }}</p>  </div>`,})export class OpeningsComponent {@Input() count!: number;content = useIntlayer("total_openings");}

To use plural content with vanilla-intlayer, retrieve it via the useIntlayer hook and call it with a count. Here's an example:

**/*.ts

Copiar código

Copiar el código al portapapeles

import { installIntlayer, useIntlayer } from "vanilla-intlayer";

installIntlayer();

const content = useIntlayer("total_openings").onChange((newContent) => {
document.getElementById("openings")!.textContent =
  newContent.totalOpenings(5);
});

// Initial render
document.getElementById("openings")!.textContent = content.totalOpenings(5);

Cuándo usar `plural` vs `enu`

To use plural content inside a React component, retrieve it via the useIntlayer hook and call it with a count. The active locale and the count are combined to pick the matching CLDR category.

**/*.tsx

Copiar código

Copiar el código al portapapeles

import type { FC } from "react";
import { useIntlayer } from "react-intlayer";

const OpeningsComponent: FC<{ count: number }> = ({ count }) => {
const { totalOpenings } = useIntlayer("total_openings");

return (
  <div>
    <p>{totalOpenings(count)}</p>
  </div>
);
};

export default OpeningsComponent;

To use plural content in Next.js Client Components, retrieve it via the useIntlayer hook and call it with a count. Here's an example:

**/*.tsx

Copiar código

Copiar el código al portapapeles

"use client";

import type { FC } from "react";
import { useIntlayer } from "next-intlayer";

const OpeningsComponent: FC<{ count: number }> = ({ count }) => {
const { totalOpenings } = useIntlayer("total_openings");

return (
  <div>
    <p>{totalOpenings(count)}</p>
  </div>
);
};

export default OpeningsComponent;

To use plural content in Vue components, retrieve it via the useIntlayer hook and call it with a count. Here's an example:

**/*.vue

Copiar código

Copiar el código al portapapeles

<script setup lang="ts">import { useIntlayer } from "vue-intlayer";defineProps<{ count: number }>();const { totalOpenings } = useIntlayer("total_openings");</script><template><div>  <p>{{ totalOpenings(count) }}</p></div></template>

To use plural content in Svelte components, retrieve it via the useIntlayer hook and call it with a count. The store is accessed with $. Here's an example:

**/*.svelte

Copiar código

Copiar el código al portapapeles

<script lang="ts">import { useIntlayer } from "svelte-intlayer";export let count: number;const content = useIntlayer("total_openings");</script><div><p>{$content.totalOpenings(count)}</p></div>

To use plural content in Preact components, retrieve it via the useIntlayer hook and call it with a count. Here's an example:

**/*.tsx

Copiar código

Copiar el código al portapapeles

import type { FC } from "preact";
import { useIntlayer } from "preact-intlayer";

const OpeningsComponent: FC<{ count: number }> = ({ count }) => {
const { totalOpenings } = useIntlayer("total_openings");

return (
  <div>
    <p>{totalOpenings(count)}</p>
  </div>
);
};

export default OpeningsComponent;

To use plural content in SolidJS components, retrieve it via the useIntlayer hook and call it with a count. Here's an example:

**/*.tsx

Copiar código

Copiar el código al portapapeles

import type { Component } from "solid-js";
import { useIntlayer } from "solid-intlayer";

const OpeningsComponent: Component<{ count: number }> = (props) => {
const { totalOpenings } = useIntlayer("total_openings");

return (
  <div>
    <p>{totalOpenings(props.count)}</p>
  </div>
);
};

export default OpeningsComponent;

To use plural content in Angular components, retrieve it via the useIntlayer hook and call it with a count. Here's an example:

app.component.ts

Copiar código

Copiar el código al portapapeles

import { Component, Input } from "@angular/core";import { useIntlayer } from "angular-intlayer";@Component({selector: "app-openings",template: `  <div>    <p>{{ content().totalOpenings(count) }}</p>  </div>`,})export class OpeningsComponent {@Input() count!: number;content = useIntlayer("total_openings");}

To use plural content with vanilla-intlayer, retrieve it via the useIntlayer hook and call it with a count. Here's an example:

**/*.ts

Copiar código

Copiar el código al portapapeles

import { installIntlayer, useIntlayer } from "vanilla-intlayer";

installIntlayer();

const content = useIntlayer("total_openings").onChange((newContent) => {
document.getElementById("openings")!.textContent =
  newContent.totalOpenings(5);
});

// Initial render
document.getElementById("openings")!.textContent = content.totalOpenings(5);

Configuración del contenido en plural

Para configurar el contenido en plural en tu proyecto Intlayer, crea un módulo de contenido que utilice el ayudante plural. La categoría other es obligatoria y se utiliza como respaldo cuando una configuración regional no define una categoría más específica.

**/*.content.ts

Copiar código

Copiar el código al portapapeles

import { plural, t, type Dictionary } from "intlayer";

const openingsContent = {
  key: "total_openings",
  content: {
    totalOpenings: t({
      en: plural({
        one: "{{count}} opening",
        other: "{{count}} openings",
      }),
      es: plural({
        one: "{{count}} vacante",
        other: "{{count}} vacantes",
      }),
    }),
  },
} satisfies Dictionary;

export default openingsContent;

Las categorías admitidas son zero, one, two, few, many, other. Solo necesitas declarar las categorías que utiliza tu idioma de destino; Intlayer recurre a other cuando no coincide ninguna categoría específica.

El marcador de posición {{count}} se reemplaza automáticamente con el conteo que pases en runtime. También puedes incluir otros marcadores de posición (consulta Marcadores de posición personalizados a continuación).

Uso de contenido en plural con React Intlayer

Para usar contenido en plural dentro de un componente de React, recupéralo a través del gancho useIntlayer y llámalo con un conteo. La configuración regional activa y el conteo se combinan para elegir la categoría CLDR coincidente.

**/*.tsx

Copiar código

Copiar el código al portapapeles

import type { FC } from "react";
import { useIntlayer } from "react-intlayer";

const OpeningsComponent: FC<{ count: number }> = ({ count }) => {
  const { totalOpenings } = useIntlayer("total_openings");

  return (
    <div>
      {/* En inglés:                                   */}
      {/*  count=0  → "0 openings"   (other)           */}
      {/*  count=1  → "1 opening"    (one)             */}
      {/*  count=2  → "2 openings"   (other)           */}
      {/*  count=21 → "21 openings"  (other)           */}
      <p>{totalOpenings(count)}</p>
    </div>
  );
};

export default OpeningsComponent;

Puedes llamar a la función devuelta de dos maneras equivalentes:

tsx

Copiar código

Copiar el código al portapapeles

totalOpenings(21); // forma abreviada: solo conteototalOpenings({ count: 21 }); // forma explícita

Marcadores de posición personalizados

Las cadenas en plural pueden incluir marcadores de posición distintos de {{count}}. Pásalos en forma de objeto junto con count:

**/*.content.ts

Copiar código

Copiar el código al portapapeles

import { plural, type Dictionary } from "intlayer";

const inboxContent = {
  key: "inbox_summary",
  content: {
    summary: plural({
      one: "{{name}}, tienes {{count}} mensaje nuevo",
      other: "{{name}}, tienes {{count}} mensajes nuevos",
    }),
  },
} satisfies Dictionary;

export default inboxContent;

**/*.tsx

Copiar código

Copiar el código al portapapeles

const { summary } = useIntlayer("inbox_summary");

summary({ count: 1, name: "Alice" });
// → "Alice, tienes 1 mensaje nuevo"

summary({ count: 7, name: "Alice" });
// → "Alice, tienes 7 mensajes nuevos"

Categorías CLDR de un vistazo

Diferentes idiomas utilizan diferentes subconjuntos de las categorías CLDR. Algunos casos comunes:

Mostrar todo el contenido de la tabla

Abrir la tabla en una ventana flotante para ver todo el contenido claramente

Idioma	Categorías utilizadas
Inglés (`en`)	`one`, `other`
Francés (`fr`)	`one`, `many`, `other`
Ruso (`ru`)	`one`, `few`, `many`, `other`
Polaco (`pl`)	`one`, `few`, `many`, `other`
Árabe (`ar`)	`zero`, `one`, `two`, `few`, `many`, `other`
Japonés / Chino	solo `other`

No necesitas memorizar esto: declara las categorías para las que tienes traducciones e Intlayer recurrirá a other cuando sea necesario.

Limitación

A diferencia de otros nodos, el nodo plural aún no se puede imbricar con nodos hijos.

Ejemplo:

Válido:

Copiar código

Copiar el código al portapapeles

    totalOpenings: t({      en: plural({        one: "{{count}} opening",        other: "{{count}} openings",      }),      fr: plural({        one: "{{count}} offre",        other: "{{count}} offres",      }),    }),

Inválido:

Copiar código

Copiar el código al portapapeles

totalOpenings: plural({  one: t({    en: "{{count}} opening",    fr: "{{count}} offre",  }),  other: t({    en: "{{count}} openings",    fr: "{{count}} offres",  }),}),

Recursos adicionales

Para obtener información más detallada sobre la configuración y el uso, consulta los siguientes recursos:

Estos recursos ofrecen más información sobre la configuración y el uso de Intlayer en diversos entornos y marcos.

Traducción Enumeración

Historial de versiones

Contenido en Plural / El plural en Intlayer

Cómo funciona el plural

Cuándo usar plural vs enu

Configuración del contenido en plural

Uso de contenido en plural con React Intlayer

Marcadores de posición personalizados

Categorías CLDR de un vistazo

Limitación

Recursos adicionales

Cuándo usar `plural` vs `enu`