Uso avanzato
Gestione delle lingue da destra a sinistra
TacoTranslate rende semplice supportare 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 i tuoi contenuti vengano visualizzati 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 usare 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';
// ...
}
Disattivazione della traduzione
Per disabilitare la traduzione di parti specifiche di una stringa o per garantire che determinati segmenti siano mantenuti invariati, puoi usare triple parentesi quadre. Questa funzione è utile per mantenere il formato originale di nomi, termini tecnici o qualsiasi altro contenuto che non deve 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 tue traduzioni e le 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 di 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 l'origine o il locale
Oltre all'utilizzo di più TacoTranslate
provider, 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 lingua sul 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 riscontro 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 visualizzare correttamente le 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 diversi valori di locale
come mostrato di seguito:
Puoi anche sovrascrivere la 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
Puoi aggiungere un id
al componente Translate
per gestire traduzioni o significati diversi per la stessa stringa. Ciò è particolarmente utile quando lo stesso testo richiede traduzioni diverse in base al contesto. Assegnando ID univoci, ti assicuri che ogni istanza della stringa venga tradotta accuratamente in base al 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 dell'intestazione potrebbe essere tradotto come “Iniciar sesión”, e il login del piè di pagina potrebbe essere tradotto come “Acceder” in spagnolo.