Autore:
    Creazione:2026-05-04Ultimo aggiornamento:2026-05-04

    Contenuto Plurale / Il plurale in Intlayer

    Come funziona il plurale

    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;

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

    Configurazione del contenuto plurale

    Per configurare il contenuto plurale nel tuo progetto Intlayer, crea un modulo di contenuto che utilizzi l'helper plural. La categoria other è obbligatoria e viene utilizzata come fallback quando una locale non definisce una categoria più specifica.

    **/*.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",
      }),
      it: plural({
        one: "{{count}} posizione aperta",
        other: "{{count}} posizioni aperte",
      }),
    }),
  },
} satisfies Dictionary;

export default openingsContent;

    Le categorie supportate sono zero, one, two, few, many, other. Devi solo dichiarare le categorie utilizzate dalla tua lingua di destinazione, Intlayer torna a other quando nessuna categoria specifica corrisponde.

    Il segnaposto {{count}} viene sostituito automaticamente con il conteggio passato in fase di esecuzione. Puoi includere anche altri segnaposto (vedi Segnaposto personalizzati sotto).

    Utilizzo del contenuto plurale con React Intlayer

    Per utilizzare il contenuto plurale all'interno di un componente React, recuperalo tramite l'hook useIntlayer e chiamalo con un conteggio. La locale attiva e il conteggio vengono combinati per scegliere la categoria CLDR corrispondente.

    **/*.tsx
    import type { FC } from "react";
import { useIntlayer } from "react-intlayer";

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

  return (
    <div>
      {/* In inglese:                                   */}
      {/*  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;

    Puoi chiamare la funzione restituita in due modi equivalenti:

    tsx
    totalOpenings(21); // abbreviato: solo conteggiototalOpenings({ count: 21 }); // forma esplicita

    Segnaposto personalizzati

    Le stringhe plurali possono includere segnaposto diversi da {{count}}. Passali sotto forma di oggetto insieme a count:

    **/*.content.ts
    import { plural, type Dictionary } from "intlayer";

const inboxContent = {
  key: "inbox_summary",
  content: {
    summary: plural({
      one: "{{name}}, hai {{count}} nuovo messaggio",
      other: "{{name}}, hai {{count}} nuovi messaggi",
    }),
  },
} satisfies Dictionary;

export default inboxContent;
    **/*.tsx
    const { summary } = useIntlayer("inbox_summary");

summary({ count: 1, name: "Alice" });
// → "Alice, hai 1 nuovo messaggio"

summary({ count: 7, name: "Alice" });
// → "Alice, hai 7 nuovi messaggi"

    Categorie CLDR a colpo d'occhio

    Lingue diverse utilizzano diversi sottoinsiemi delle categorie CLDR. Alcuni casi comuni:

    Lingua Categorie utilizzate
    Inglese (en) one, other
    Francese (fr) one, many, other
    Russo (ru) one, few, many, other
    Polacco (pl) one, few, many, other
    Arabo (ar) zero, one, two, few, many, other
    Giapponese / Cinese solo other

    Non è necessario memorizzarlo, dichiara le categorie per le quali hai traduzioni e Intlayer tornerà a other quando necessario.

    Limitazione

    A differenza di altri nodi, il nodo plural non può ancora essere nidificato con nodi figli.

    Esempio:

    Valido:

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

    Non valido:

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

    Risorse aggiuntive

    Per informazioni più dettagliate sulla configurazione e l'utilizzo, fare riferimento alle seguenti risorse:

    Queste risorse offrono ulteriori approfondimenti sulla configurazione e l'utilizzo di Intlayer in vari ambienti e framework.

    Traduzione
    Enumerazione