Napredno korišćenje
Rukovanje jezicima s desna na levo
TacoTranslate olakšava podršku jezicima sa desna na levo (RTL), kao što su arapski i hebrejski, u vašim React aplikacijama. Ispravno rukovanje RTL jezicima osigurava da vaš sadržaj bude pravilno prikazan korisnicima koji čitaju sa 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 funkciju isRightToLeftLocaleCode
da proverite trenutni jezik van React-a.
import {isRightToLeftLocaleCode} from 'tacotranslate';
function foo(locale = 'es') {
const direction = isRightToLeftLocaleCode(locale) ? 'rtl' : 'ltr';
// ...
}
Onemogućavanje prevoda
Da biste onemogućili prevođenje određenih delova niza ili osigurali da određeni segmenti ostanu nepromenjeni, 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 bude preveden.
import {Translate} from 'tacotranslate/react';
function Component() {
return (
<Translate string="Hello, [[[TacoTranslate]]]!" />
);
}
U ovom primeru, reč “TacoTranslate” će ostati nepromenjena u prevodu.
Više TacoTranslate provajdera
Snažno preporučujemo korišćenje više TacoTranslate
provajdera u vašoj aplikaciji. Ovo je korisno za organizovanje vaših prevoda i stringova u različite izvore, kao što su zaglavlje, podnožje ili određeni delovi stranice.
Možete pročitati više o korišćenju origin-a ovde.
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>
);
}
Preklapanje izvora ili lokaliteta
Pored korišćenja više TacoTranslate
pružalaca, možete takođe prebrisati i 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
При промену језика на клијентској страни, учитавање превода може потрајати неколико момената у зависности од корисникове везе. Можете приказати индикатор учитавања како бисте побољшали корисничко искуство пружајући визуелне информације током промене.
import {useTacoTranslate} from 'tacotranslate/react';
function Component() {
const {isLoading} = useTacoTranslate();
return (
isLoading ? 'Translations are loading...' : null
);
}
Pluralizacija
Za pravilno rukovanje množinom i ispravan prikaz oznaka zasnovanih na broju u različitim jezicima, smatra se 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
Za podršku više jezika istovremeno unutar iste aplikacije, možete koristiti više TacoTranslate
provajdera sa različitim vrednostima locale
kao što je prikazano ispod:
Takođe možete prebrisati locale
na nivou komponenta ili hook-a.
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-jeva za prevod
Možete dodati id
komponenti Translate
da biste rukovali različitim prevodima ili značenjima za isti string. Ovo je posebno korisno kada isti tekst zahteva različite prevode u zavisnosti od konteksta. Dodeljivanjem jedinstvenih ID-jeva osiguravate da je svaki primerak stringa tačno preveden prema njegovom specifičnom značenju.
import {Translate} from 'tacotranslate/react';
function Header() {
return (
<Translate id="header" string="Login" />
);
}
function Footer() {
return (
<Translate id="footer" string="Login" />
);
}
Na primer, header login može biti preveden kao „Iniciar sesión“, a footer login kao „Acceder“ na španskom.