Documentazione: Uso avanzato

Utilizzo avanzato

Italian

Gestione delle lingue da destra a sinistra

TacoTranslate rende facile il supporto per le lingue da destra a sinistra (RTL), come l'arabo e l'ebraico, nelle tue applicazioni React. Una gestione corretta delle lingue RTL garantisce che il tuo contenuto venga visualizzato correttamente per gli 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';
	// ...
}

Disabilitazione della traduzione

Per disabilitare la traduzione di parti specifiche di una stringa o per garantire che alcuni segmenti rimangano invariati, puoi usare le triple parentesi quadre. Questa funzione è utile per mantenere il formato originale di nomi, termini tecnici o qualsiasi altro contenuto che non dovrebbe 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ù fornitori di TacoTranslate

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

Puoi leggere di più sull'utilizzo delle origini qui.

I provider TacoTranslate ereditano le impostazioni da qualsiasi provider genitore, quindi non dovrai ripetere altre impostazioni.

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 origine o località

Oltre a utilizzare più provider TacoTranslate, puoi anche sovrascrivere sia l'origine che la locale a livello di componente Translate e 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 lingua lato client, il recupero delle traduzioni potrebbe richiedere alcuni istanti a seconda della connessione dell’utente. Puoi mostrare un indicatore di caricamento per migliorare l’esperienza 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 correttamente la pluralizzazione e visualizzare etichette basate sul conteggio in diverse lingue, questa è considerata una best practice:

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 all'interno della stessa applicazione, puoi utilizzare più provider TacoTranslate con valori locale differenti come mostrato di seguito:

Puoi anche sovrascrivere il locale a livello di componente o 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>
	);
}

Utilizzo degli ID di traduzione

Puoi aggiungere un id al componente Translate per gestire diverse traduzioni o significati per la stessa stringa. Questo è particolarmente utile quando lo stesso testo richiede traduzioni differenti in base al contesto. Assegnando ID unici, garantisci che ogni istanza 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 essere tradotto come “Iniciar sesión”, e il login nel piè di pagina potrebbe essere tradotto come “Acceder” in spagnolo.

Best practice