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

    Contenido en Plural / El plural en 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
    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;

    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
    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;

    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
    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
    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
    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
    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
    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:

    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:

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

    Inválido:

    ts
    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