Documentazione: Utilizzo di TacoTranslate

Utilizzo di TacoTranslate

Italian

Traduzione delle stringhe

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

Uso del componente Translate.
Visualizza 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, per esempio, as="p" sul componente.

Uso del hook useTranslation.
Restituisce le traduzioni come una 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>
	);
}

Utilizzo dell’utility translateEntries.
Traduci le stringhe 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, le convalidiamo e le salviamo prima, quindi restituiamo immediatamente una traduzione automatica. Sebbene le traduzioni automatiche siano generalmente di qualità inferiore rispetto alle nostre traduzioni AI, forniscono una risposta iniziale rapida.

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

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

Utilizzo degli origin

I progetti TacoTranslate contengono quello che chiamiamo origins. Considerali come punti di accesso, cartelle o gruppi per le tue stringhe e traduzioni.

import {TacoTranslate} from 'tacotranslate/react';

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

Gli origins ti permettono di separare le stringhe in contenitori significativi. Ad esempio, potresti avere un origin per la documentazione e un altro per la tua pagina di marketing.

Per un controllo più dettagliato, potresti configurare gli origin a livello di componente.

Per ottenere questo, considera di usare più provider TacoTranslate all'interno del tuo progetto.

Si prega di notare che la stessa stringa può ricevere traduzioni diverse in origini differenti.

In definitiva, come separare 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 utilizzare variabili per contenuti dinamici, come nomi utente, date, indirizzi e-mail e altro.

Le variabili nelle stringhe sono dichiarate usando 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 renderizza contenuti HTML. Tuttavia, puoi rinunciare a questo comportamento impostando useDangerouslySetInnerHTML su false.

Disabilitare il rendering HTML è fortemente consigliato quando si traducono contenuti non attendibili, come i contenuti generati dagli utenti.

Tutti i contenuti vengono sempre sottoposti a sanificazione con sanitize-html prima della visualizzazione.

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 sarà visualizzato come testo normale.

Rendering lato server