Napredno korišćenje
Rukovanje jezicima koji se pišu s desna na levo
TacoTranslate olakšava podršku jezicima koji se pišu s desna na levo (RTL), poput arapskog i hebrejskog, 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 dostupnu funkciju isRightToLeftLocaleCode
da biste proverili 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 osigurali da određeni segmenti ostanu nepromenjeni, možete koristiti trostruke uglaste zagrade. Ova funkcija je korisna za očuvanje 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 provajdera TacoTranslate
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 odeljci.
Možete pročitati više o korišćenju origins ovde.
TacoTranslate
provajderi nasleđuju podešavanja od bilo kog roditeljskog provajdera, tako da nećete morati da ponavljate bilo koja druga 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
provajdera, možete takođe poništiti 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
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.
import {useTacoTranslate} from 'tacotranslate/react';
function Component() {
const {isLoading} = useTacoTranslate();
return (
isLoading ? 'Translations are loading...' : null
);
}
Pluralizacija
Za pravilno rukovanje pluralizacijom i prikazivanje oznaka zavisnih od broja 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
Da biste istovremeno podržali više jezika u istoj aplikaciji, možete koristiti više provajdera TacoTranslate sa različitim locale
vrednostima kao što je prikazano ispod:
Takođe možete nadjačati locale
na nivou komponente 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 prevoda
Možete dodati id
komponenti Translate
kako biste upravljali različitim prevodima ili značenjima iste fraze. To je posebno korisno kada isti tekst zahteva različite prevode u zavisnosti od konteksta. Dodeljivanjem jedinstvenih ID-jeva osiguravate da je svaki primerak fraze preveden tačno 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.