Utilizare avansată
Gestionarea limbilor scrise de la dreapta la stânga
TacoTranslate facilitează suportul pentru limbile cu scriere de la dreapta la stânga (RTL), precum araba și ebraica, în aplicațiile tale React. Gestionarea corectă a limbilor RTL asigură afișarea corectă a conținutului pentru utilizatorii care citesc de la dreapta la stânga.
import {useTacoTranslate} from 'tacotranslate/react';
function Document() {
const {locale, isRightToLeft} = useTacoTranslate();
return (
<html lang={locale} dir={isRightToLeft ? 'rtl' : 'ltr'}>
<body>
// ...
</body>
</html>
);
}
De asemenea, puteți utiliza funcția furnizată isRightToLeftLocaleCode
pentru a verifica limba curentă în afara React.
import {isRightToLeftLocaleCode} from 'tacotranslate';
function foo(locale = 'es') {
const direction = isRightToLeftLocaleCode(locale) ? 'rtl' : 'ltr';
// ...
}
Dezactivarea traducerii
Pentru a dezactiva traducerea unor părți specifice ale unui șir sau pentru a vă asigura că anumite segmente sunt păstrate neschimbate, puteți folosi paranteze pătrate triple. Această funcție este utilă pentru menținerea formatului original al numelor, termenilor tehnici sau al oricărui alt conținut care nu ar trebui tradus.
import {Translate} from 'tacotranslate/react';
function Component() {
return (
<Translate string="Hello, [[[TacoTranslate]]]!" />
);
}
În acest exemplu, cuvântul “TacoTranslate” va rămâne neschimbat în traducere.
Mai mulți furnizori TacoTranslate
Vă încurajăm cu tărie să utilizați mai mulți furnizori TacoTranslate
în aplicația dvs. Acest lucru este util pentru organizarea traducerilor și a textelor în origini diferite, cum ar fi antetul, subsolul sau anumite secțiuni.
Puteți citi mai multe despre utilizarea originilor aici.
TacoTranslate
providerii moștenesc setările de la orice provider părinte, astfel încât nu va trebui să repetați alte setări.
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>
);
}
Suprascrierea originii sau a setării regionale
Pe lângă utilizarea mai multor furnizori TacoTranslate
, poți, de asemenea, să suprascrii atât origin, cât și locale la nivelul componentului Translate
și al hook-ului useTranslation
.
import {Translate, useTranslation} from 'tacotranslate/react';
function Greeting() {
const spanishHello = useTranslation('Hello!', {locale: 'es'});
return (
<>
{spanishHello}
<Translate string="What’s up?" origin="greeting" />
</>
);
}
Gestionarea încărcării
Când schimbați limba pe partea clientului, preluarea traducerilor poate dura câteva momente, în funcție de conexiunea utilizatorului. Puteți afișa un indicator de încărcare pentru a îmbunătăți experiența utilizatorului, oferind feedback vizual în timpul comutării.
import {useTacoTranslate} from 'tacotranslate/react';
function Component() {
const {isLoading} = useTacoTranslate();
return (
isLoading ? 'Translations are loading...' : null
);
}
Pluralizare
Pentru a gestiona pluralizarea și a afișa corect etichetele bazate pe număr în diferite limbi, aceasta este considerată o bună practică:
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)}}
/>
);
}
Mai multe limbi
Pentru a suporta mai multe limbi simultan în aceeași aplicație, puteți folosi mai mulți furnizori TacoTranslate cu valori locale
diferite, așa cum se arată mai jos:
De asemenea, poți suprascrie locale
la nivelul componentelor sau al hook-urilor.
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>
);
}
Utilizarea ID-urilor de traducere
Puteți adăuga un id
la componenta Translate
pentru a gestiona traduceri diferite sau sensuri diferite pentru același șir. Acest lucru este deosebit de util atunci când același text necesită traduceri diferite în funcție de context. Prin atribuirea de ID-uri unice, vă asigurați că fiecare instanță a șirului este tradusă corect conform sensului său specific.
import {Translate} from 'tacotranslate/react';
function Header() {
return (
<Translate id="header" string="Login" />
);
}
function Footer() {
return (
<Translate id="footer" string="Login" />
);
}
De exemplu, autentificarea din antet ar putea fi tradusă ca “Iniciar sesión”, iar autentificarea din subsol ar putea fi tradusă ca “Acceder” în spaniolă.