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})
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%
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
