​
Utilizzo dell’Estensione

Utilizzando l’estensione Quetzal per VSCode/Cursore, dovresti essere in grado di avvolgere automaticamente le tue stringhe con la funzione t. Tuttavia, questa pagina documenterà l’uso manuale.

​
Importa la funzione ‘t’

Per tradurre le stringhe nella tua app, devono essere racchiuse nella funzione t di Quetzal.

La funzione t è il modo in cui Quetzal sa cosa inviare per la traduzione e dove inserire il testo tradotto.

//Next.js
import { useI18n } from "@quetzallabs/i18n"; //Componenti lato client
import { getI18nUtils } from "@quetzallabs/i18n"; //Codice lato server

//React:
import { useI18n } from "@quetzallabs/i18n-react-native"; //Componenti lato client
import { getI18nUtils } from "@quetzallabs/i18n-react-native"; //Codice lato server

export default function Page() {
  const { t } = useI18n(); //Per componenti lato client
  const { t } = await getI18nUtils(); //Per codice lato server
}

La funzione t di Quetzal è costruita sulla base della funzione t di next-intl e si comporta in modo simile. Controlla la documentazione di next-intl per le istruzioni sull’utilizzo della funzione t.

​
Avvolgi Stringhe

Una volta importata e inizializzata la funzione t, puoi iniziare a marcare le stringhe per la traduzione

import { useI18n } from "@quetzallabs/i18n";

export default function Page() {
  const { t } = useI18n();

  return <p>{t("Ecco del testo normale")}</p>;
}

Output: Ecco il testo normale

​
Casi speciali

​
Testo Dinamico

Usa segnaposto per inserire dinamicamente valori nel testo tradotto.

import { useI18n } from "@quetzallabs/i18n";

export default function Page() {
  const { t } = useI18n();

  return (
    <p>
      {t("Ecco un {dynamic1} con un {dynamic2}", {
        dynamic: 4,
        dynamic2: "quattro",
      })}
    </p>
  );
}

Risultato: Ecco un 4

​
Pluralizzazione

Gestisci la pluralizzazione in base al valore passato.

import { useI18n } from "@quetzallabs/i18n";

export default function Page() {
  const { t } = useI18n();

  return (
    <p>
      {t(
        "Hai {count, plural, =0 {ancora nessun follower} =1 {un follower} other {# follower}}.",
        { count: 4 }
      )}
    </p>
  );
}

Output: Hai 4 follower.

​
Numeri Ordinali

Formatta correttamente i numeri ordinali in diverse lingue.

import { useI18n } from "@quetzallabs/i18n";

export default function Page() {
  const { t } = useI18n();

  return (
    <p>
      {t(
        "È il tuo {year, selectordinal, one {#°} two {#°} few {#°} other {#°}} compleanno!",
        { year: 1 }
      )}
    </p>
  );
}

Output: È il tuo 1° compleanno!

​
Testo Multi-caso

Gestisci selezioni multi-caso, come le traduzioni basate sul genere.

import { useI18n } from "@quetzallabs/i18n";

export default function Page() {
  const { t } = useI18n();

  return (
    <p>
      {t("{gender, select, female {Lei} male {Lui} other {Loro}} è online.", {
        gender: "male",
      })}
    </p>
  );
}

Output: È online.

​
Escape delle Parentesi Graffe

Utilizza gli apici singoli per evitare le parentesi graffe nel testo.

import { useI18n } from "@quetzallabs/i18n";

export default function Page() {
  const { t } = useI18n();

  return <p>{t("Racchiudi le parentesi graffe tra virgolette singole (es. '{nome'})")}</p>;
}

Output: Usa virgolette singole per le parentesi graffe (es. {nome})

​
Formattazione Avanzata

Incorpora testo formattato o elementi HTML nelle tue traduzioni.

import { useI18n } from "@quetzallabs/i18n";
import { ReactNode } from "react";

export default function Page() {
  const { t } = useI18n();

  return (
    <p>
      {t("Si prega di consultare <guidelines>le linee guida</guidelines>.", {
        guidelines: (chunks: ReactNode) => <a href="/guidelines">{chunks}</a>,
      })}
    </p>
  );
}

Output: Si prega di consultare le linee guida.

​
Elementi HTML incorporati

Puoi incorporare elementi HTML direttamente nelle tue stringhe tradotte.

import { useI18n } from "@quetzallabs/i18n";
import { ReactNode } from "react";

export default function Page() {
  const { t } = useI18n();

  return (
    <p>
      {t("Questo è <important>importante</important>", {
        important: (chunks: ReactNode) => <b>{chunks}</b>,
      })}
    </p>
  );
}

Output: Questo è importante

​
Numeri Regolari

Formatta i numeri semplici in base alle impostazioni locali dell’utente.

import { useI18n } from "@quetzallabs/i18n";

export default function Page() {
  const { t } = useI18n();

  return <p>{t(1234.56)}</p>;
}

Output: 1.234,56 (in formato it-IT)

​
Valute

Formatta numeri come valute.

import { useI18n } from "@quetzallabs/i18n";

export default function Page() {
  const { t } = useI18n();

  return <p>{t(499.9, { style: "valuta", currency: "USD" })}</p>;
}

Output: 499,90 €

​
Percentuali

Formatta numeri come percentuali.

import { useI18n } from "@quetzallabs/i18n";

export default function Page() {
  const { t } = useI18n();

  return <p>{t(0.857, { style: "percent" })}</p>;
}

Output: 85,7%

​
Formati Numerici Personalizzati

Applica formattazione numerica personalizzata.

import { useI18n } from "@quetzallabs/i18n";

export default function Page() {
  const { t } = useI18n();

  return (
    <p>{t(1234.56, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</p>
  );
}

Output: 1.234,56

​
Sintassi ICU per i Numeri

Utilizza la sintassi ICU per formattare i numeri nei messaggi.

import { useI18n } from "@quetzallabs/i18n";

export default function Page() {
  const { t } = useI18n();

  return (
    <p>
      {t("Questo prodotto costa {price, number, currency}", {
        price: 32000.99,
        number: {
          currency: {
            style: "currency",
            currency: "EUR",
          },
        },
      })}
    </p>
  );
}

Output: Questo prodotto costa €32.000,99

​
Date

Formatta le date in base alle impostazioni locali dell’utente.

import { useI18n } from "@quetzallabs/i18n";

export default function Page() {
  const { t } = useI18n();

  return (
    <p>
      {t(new Date(), {
        year: "numeric",
        month: "long",
        day: "numeric",
      })}
    </p>
  );
}

Output: August 12, 2024 (in en-US locale)

​
Intervalli di Date

Formatta un intervallo di date.

import { useI18n } from "@quetzallabs/i18n";

export default function Page() {
  const { t } = useI18n();

  return (
    <p>
      {t([new Date("2020-01-01"), new Date("2020-12-31")], {
        year: "numeric",
        month: "long",
        day: "numeric",
      })}
    </p>
  );
}

Output: January 1, 2020 – December 31, 2020 (in en-US locale)

​
Liste (Congiunzioni)

Formatta liste usando congiunzioni.

import { useI18n } from "@quetzallabs/i18n";

export default function Page() {
  const { t } = useI18n();

  return (
    <p>
      {t(["HTML", "CSS", "JavaScript"], {
        type: "conjunction",
      })}
    </p>
  );
}

Output: HTML, CSS e JavaScript

​
Liste (Disgiunzioni)

Formatta elenchi con disgiunzioni.

import { useI18n } from "@quetzallabs/i18n";

export default function Page() {
  const { t } = useI18n();

  return (
    <p>
      {t(["HTML", "CSS", "JavaScript"], {
        type: "disgiunzione",
      })}
    </p>
  );
}

Output: HTML, CSS o JavaScript

​
Elenchi di Variabili

Formatta elenchi generati da variabili.

import { useI18n } from "@quetzallabs/i18n";

export default function Page() {
  const { t } = useI18n();

  const utenti = [
    { id: 1, nome: "Alice" },
    { id: 2, nome: "Bob" },
    { id: 3, nome: "Charlie" },
  ];

  const elementi = utenti.map((utente) => (
    <a key={utente.id} href={`/utente/${utente.id}`}>
      {utente.nome}
    </a>
  ));

  return <p>{t(elementi)}</p>;
}

Output: Alice, Bob e Charlie

Utilizzo dell'estensione VSCode