Documentazione: Uso avanzato

Uso avanzato

Italian

Gestione delle lingue da destra a sinistra

TacoTranslate rende semplice il supporto delle lingue scritte da destra a sinistra (RTL), come l'arabo e l'ebraico, nelle tue applicazioni React. La corretta gestione delle lingue RTL garantisce che i tuoi contenuti vengano visualizzati correttamente agli utenti che leggono da destra a sinistra.

import {useTacoTranslate} from 'tacotranslate/react';

function Document() {
	const {locale, isRightToLeft} = useTacoTranslate();

	return (
		<html lang={locale} dir={isRightToLeft ? 'rtl' : 'ltr'}>
			<body>
				// ...
			</body>
		</html>
	);
}

Puoi anche utilizzare la funzione fornita isRightToLeftLocaleCode per verificare la lingua corrente al di fuori di React.

import {isRightToLeftLocaleCode} from 'tacotranslate';

function foo(locale = 'es') {
	const direction = isRightToLeftLocaleCode(locale) ? 'rtl' : 'ltr';
	// ...
}

Disabilitare la traduzione

Per disattivare la traduzione di parti specifiche di una stringa o per assicurarti che alcuni segmenti vengano mantenuti invariati, puoi usare le parentesi quadre triple. Questa funzionalità è utile per conservare il formato originale di nomi, termini tecnici o qualsiasi altro contenuto che non debba essere tradotto.

import {Translate} from 'tacotranslate/react';

function Component() {
	return (
		<Translate string="Hello, [[[TacoTranslate]]]!" />
	);
}

In questo esempio, la parola “TacoTranslate” rimarrà invariata nella traduzione.

Più provider di TacoTranslate

Raccomandiamo vivamente di utilizzare più provider TacoTranslate nella tua app. Questo è utile per organizzare le traduzioni e le stringhe in origini diverse, come l'intestazione, il piè di pagina o sezioni specifiche.

Puoi leggere maggiori informazioni sull'utilizzo delle origini qui.

I provider TacoTranslate ereditano le impostazioni da qualsiasi provider genitore, quindi non dovrai ripetere nessun'altra impostazione.

import createTacoTranslateClient from 'tacotranslate';
import {TacoTranslate} from 'tacotranslate/react';

const tacoTranslateClient = createTacoTranslateClient({apiKey: 'YOUR_API_KEY'});

function Header() {
	return (
		<TacoTranslate origin="header">
			// ...
		</TacoTranslate>
	);
}

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

export default function App() {
	return (
		<TacoTranslate client={tacoTranslateClient} origin="page" locale="es">
			<Header />
			<Menu />
		</TacoTranslate>
	);
}

Sovrascrivere l'origine o il locale

Oltre a utilizzare più provider TacoTranslate, puoi anche sovrascrivere sia l'origine che il locale a livello del componente Translate e dell'hook useTranslation.

import {Translate, useTranslation} from 'tacotranslate/react';

function Greeting() {
	const spanishHello = useTranslation('Hello!', {locale: 'es'});

	return (
		<>
			{spanishHello}
			<Translate string="What’s up?" origin="greeting" />
		</>
	);
}

Gestione del caricamento

Quando si cambia la lingua lato client, il recupero delle traduzioni potrebbe richiedere qualche istante a seconda della connessione dell'utente. Puoi visualizzare un indicatore di caricamento per migliorare l'esperienza dell'utente fornendo un feedback visivo durante il cambio.

import {useTacoTranslate} from 'tacotranslate/react';

function Component() {
	const {isLoading} = useTacoTranslate();

	return (
		isLoading ? 'Translations are loading...' : null
	);
}

Pluralizzazione

Per gestire la pluralizzazione e mostrare correttamente etichette basate sul conteggio nelle diverse lingue, questa è considerata una buona pratica:

import {Translate, useLocale} from 'tacotranslate/react';

function PhotoCount() {
	const locale = useLocale();
	const count = 1;

	return count === 0 ? (
		<Translate string="You have no photos." />
	) : count === 1 ? (
		<Translate string="You have 1 photo." />
	) : (
		<Translate
			string="You have {{count}} photos."
			variables={{count: count.toLocaleString(locale)}}
		/>
	);
}

Più lingue

Per supportare più lingue contemporaneamente nella stessa applicazione, puoi utilizzare più provider TacoTranslate con valori locale diversi come mostrato di seguito:

Puoi anche sovrascrivere il locale a livello di componente o di hook.

import createTacoTranslateClient from 'tacotranslate';
import {TacoTranslate, Translate} from 'tacotranslate/react';

const tacoTranslateClient = createTacoTranslateClient({apiKey: 'YOUR_API_KEY'});

function Spanish() {
	return (
		<TacoTranslate locale="es">
			<Translate string="Hello, world in Spanish!" />
		</TacoTranslate>
	);
}

function Norwegian() {
	return (
		<TacoTranslate locale="no">
			<Translate string="Hello, world in Norwegian!" />
		</TacoTranslate>
	);
}

export default function App() {
	return (
		<TacoTranslate client={tacoTranslateClient} origin="page" locale="es">
			<Spanish />
			<Norwegian />
		</TacoTranslate>
	);
}

Uso degli ID di traduzione

È possibile aggiungere un id al componente Translate per gestire traduzioni diverse o significati differenti per la stessa stringa. Questo è particolarmente utile quando lo stesso testo richiede traduzioni diverse in base al contesto. Assegnando ID univoci, si garantisce che ogni occorrenza della stringa venga tradotta accuratamente secondo il suo significato specifico.

import {Translate} from 'tacotranslate/react';

function Header() {
	return (
		<Translate id="header" string="Login" />
	);
}

function Footer() {
	return (
		<Translate id="footer" string="Login" />
	);
}

Ad esempio, il login nell'intestazione potrebbe tradursi in “Iniciar sesión”, e il login nel piè di pagina potrebbe tradursi in “Acceder” in spagnolo.

Buone pratiche