Documentazione: Utilizzo di TacoTranslate

Uso di TacoTranslate

Italian

Traduzione delle stringhe

Attualmente ci sono tre modi per tradurre le stringhe: il componente Translate, l'hook useTranslation, o l'utility translateEntries.

Utilizzo del componente Translate.
Mostra le traduzioni all'interno di un elemento span, e supporta il rendering HTML.

import {Translate} from 'tacotranslate/react';

function Page() {
	return <Translate string="Hello, world!" />;
}

Puoi cambiare il tipo di elemento usando, ad esempio, as="p" sul componente.

Uso dell'hook useTranslation.
Restituisce le traduzioni come stringa semplice. Utile, ad esempio, nei tag meta.

import {useEffect} from 'react';
import {useTranslation} from 'tacotranslate/react';

function Page() {
	const helloWorld = useTranslation('Hello, world!');

	useEffect(() => {
		alert(helloWorld);
	}, [helloWorld]);

	return (
		<title>{useTranslation('My page title')}</title>
	);
}

Usare l'utility translateEntries.
Traduci le stringhe sul lato server. Potenzia le tue immagini OpenGraph.

import {createEntry, translateEntries} from 'tacotranslate';

async function generateMetadata(locale = 'es') {
	const title = createEntry({string: 'Hello, world!'});
	const description = createEntry({string: 'TacoTranslate on the server'});

	const translations = await translateEntries(
		tacoTranslate,
		{origin: 'opengraph', locale},
		[title, description]
	);

	return {
		title: translations(title),
		description: translations(description)
	};
}

Come vengono tradotte le stringhe

Quando le stringhe raggiungono i nostri server, prima le convalidiamo e le salviamo, quindi restituiamo immediatamente una traduzione automatica. Sebbene le traduzioni automatiche siano generalmente di qualità inferiore rispetto alle nostre traduzioni AI, offrono una risposta iniziale rapida.

Contemporaneamente, avviamo un processo di traduzione asincrono per generare una traduzione AI di alta qualità e all'avanguardia per la tua stringa. Una volta che la traduzione AI è pronta, sostituirà la traduzione automatica e verrà inviata ogni volta che richiedi le traduzioni delle tue stringhe.

Se hai tradotto manualmente una stringa, tali traduzioni hanno la precedenza e vengono restituite.

Utilizzo delle origini

I progetti TacoTranslate contengono ciò che chiamiamo origini. Pensali come punti di ingresso, cartelle o gruppi per le tue stringhe e traduzioni.

import {TacoTranslate} from 'tacotranslate/react';

function Menu() {
	return (
		<TacoTranslate origin="application-menu">
			// ...
		</TacoTranslate>
	);
}

Le origini consentono di separare le stringhe in contenitori significativi. Ad esempio, potresti avere un'origine per la documentazione e un'altra per la pagina di marketing.

Per un controllo più granulare, potresti configurare le origini a livello di componente.

Per raggiungere questo obiettivo, prendi in considerazione l'utilizzo di più provider TacoTranslate all'interno del tuo progetto.

Si noti che la stessa stringa può ricevere traduzioni diverse a seconda dell'origine.

In definitiva, il modo in cui separi le stringhe in origini dipende da te e dalle tue esigenze. Tuttavia, tieni presente che avere molte stringhe all'interno di un'unica origine può aumentare i tempi di caricamento.

Gestione delle variabili

Dovresti sempre usare variabili per contenuti dinamici, come i nomi utente, le date, gli indirizzi e-mail e altro ancora.

Le variabili nelle stringhe sono dichiarate utilizzando doppie parentesi graffe, come {{variable}}.

import {Translate} from 'tacotranslate/react';

function Greeting() {
	const name = 'Juan';
	return <Translate string="Hello, {{name}}!" variables={{name}} />;
}

import {useTranslation} from 'tacotranslate/react';

function useGreeting() {
	const name = 'Juan';
	return useTranslation('Hello, {{name}}!', {variables: {name}});
}

Gestione dei contenuti HTML

Per impostazione predefinita, il componente Translate supporta e rende i contenuti HTML. Tuttavia, puoi disattivare questo comportamento impostando useDangerouslySetInnerHTML su false.

Si consiglia vivamente di disabilitare il rendering HTML quando si traducono contenuti non affidabili, come i contenuti generati dagli utenti.

Tutto l'output viene sempre sanitizzato con sanitize-html prima di essere visualizzato.

import {Translate} from 'tacotranslate/react';

function Page() {
	return (
		<Translate
			string={`
				Welcome to <strong>my</strong> website.
				I’m using <a href="{{url}}">TacoTranslate</a> to translate text.
			`}
			variables={{url: 'https://tacotranslate.com'}}
			useDangerouslySetInnerHTML={false}
		/>
	);
}

L'esempio sopra verrà visualizzato come semplice testo.

Rendering lato server