Napredna upotreba
Rukovanje jezicima koji se pišu s desna na levo
TacoTranslate olakšava podršku jezicima koji se čitaju s desna na levo (RTL), kao što su arapski i hebrejski, u vašim React aplikacijama. Ispravno rukovanje RTL jezicima osigurava da se vaš sadržaj pravilno prikazuje korisnicima koji čitaju s desna na levo.
import {useTacoTranslate} from 'tacotranslate/react';
function Document() {
const {locale, isRightToLeft} = useTacoTranslate();
return (
<html lang={locale} dir={isRightToLeft ? 'rtl' : 'ltr'}>
<body>
// ...
</body>
</html>
);
}
Takođe možete koristiti ponuđenu isRightToLeftLocaleCode
funkciju da proverite trenutni jezik izvan React.
import {isRightToLeftLocaleCode} from 'tacotranslate';
function foo(locale = 'es') {
const direction = isRightToLeftLocaleCode(locale) ? 'rtl' : 'ltr';
// ...
}
Onemogućavanje prevođenja
Da biste onemogućili prevođenje određenih delova niza ili da biste osigurali da se određeni segmenti sačuvaju neizmenjeni, možete koristiti trostruke uglaste zagrade. Ova funkcija je korisna za održavanje originalnog formata imena, tehničkih termina ili bilo kog drugog sadržaja koji ne bi trebalo da se prevodi.
import {Translate} from 'tacotranslate/react';
function Component() {
return (
<Translate string="Hello, [[[TacoTranslate]]]!" />
);
}
U ovom primeru, reč “TacoTranslate” će ostati nepromenjena u prevodu.
Više provajdera TacoTranslate
Toplo preporučujemo korišćenje više TacoTranslate
provajdera u vašoj aplikaciji. To je korisno za organizovanje vaših prevoda i stringova po različitim izvorima, kao što su zaglavlje, podnožje ili određeni odeljci.
Možete ovde pročitati više o korišćenju origins.
TacoTranslate
provajderi nasleđuju podešavanja od bilo kog roditeljskog provajdera, tako da nećete morati da ponavljate ostala podešavanja.
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>
);
}
Prepisivanje origin-a ili lokalnih podešavanja
Pored korišćenja više TacoTranslate
provajdera, možete takođe prebrisati origin i locale na nivoima Translate
komponente i useTranslation
hook-a.
import {Translate, useTranslation} from 'tacotranslate/react';
function Greeting() {
const spanishHello = useTranslation('Hello!', {locale: 'es'});
return (
<>
{spanishHello}
<Translate string="What’s up?" origin="greeting" />
</>
);
}
Rukovanje učitavanjem
Pri promeni jezika na strani klijenta, preuzimanje prevoda može potrajati nekoliko trenutaka u zavisnosti od veze korisnika. Možete prikazati indikator učitavanja kako biste poboljšali korisničko iskustvo pružajući vizuelnu povratnu informaciju tokom promene jezika.
import {useTacoTranslate} from 'tacotranslate/react';
function Component() {
const {isLoading} = useTacoTranslate();
return (
isLoading ? 'Translations are loading...' : null
);
}
Pluralizacija
Za pravilno upravljanje pluralizacijom i ispravan prikaz oznaka zavisnih od broja u različitim jezicima, ovo se smatra najboljom praksom:
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)}}
/>
);
}
Više jezika
Da biste podržali više jezika istovremeno u istoj aplikaciji, možete koristiti više TacoTranslate provajdera sa različitim vrednostima locale
kao što je prikazano ispod:
Takođe možete prepisati locale
na nivou komponente ili hooka.
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>
);
}
Korišćenje ID-eva za prevod
Možete dodati id
komponenti Translate
da biste upravljali različitim prevodima ili značenjima iste niske. Ovo je posebno korisno kada isti tekst zahteva različite prevode u zavisnosti od konteksta. Dodeljivanjem jedinstvenih ID-ova, osiguravate da je svaka pojava iste niske tačno prevedena u skladu sa svojim specifičnim značenjem.
import {Translate} from 'tacotranslate/react';
function Header() {
return (
<Translate id="header" string="Login" />
);
}
function Footer() {
return (
<Translate id="footer" string="Login" />
);
}
Na primer, prijava u zaglavlju može se prevesti kao “Iniciar sesión”, a prijava u podnožju može se prevesti kao “Acceder” na španskom.