Napredno korištenje
Rukovanje jezicima s desna na lijevo
TacoTranslate olakšava podršku jezicima s pisanjem s desna na lijevo (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 lijevo.
import {useTacoTranslate} from 'tacotranslate/react';
function Document() {
const {locale, isRightToLeft} = useTacoTranslate();
return (
<html lang={locale} dir={isRightToLeft ? 'rtl' : 'ltr'}>
<body>
// ...
</body>
</html>
);
}
Također možete koristiti pruženu funkciju isRightToLeftLocaleCode
za provjeru trenutnog jezika izvan React.
import {isRightToLeftLocaleCode} from 'tacotranslate';
function foo(locale = 'es') {
const direction = isRightToLeftLocaleCode(locale) ? 'rtl' : 'ltr';
// ...
}
Onemogućavanje prijevoda
Da biste onemogućili prijevod za određene dijelove niza ili osigurali da određeni segmenti ostanu nepromijenjeni, možete koristiti trostruke uglate zagrade. Ova značajka je korisna za održavanje izvornog formata imena, tehničkih pojmova ili bilo kojeg drugog sadržaja koji se ne smije prevoditi.
import {Translate} from 'tacotranslate/react';
function Component() {
return (
<Translate string="Hello, [[[TacoTranslate]]]!" />
);
}
U ovom primjeru, riječ “TacoTranslate” ostat će nepromijenjena u prijevodu.
Više pružatelja usluga TacoTranslate
Snažno potičemo korištenje više TacoTranslate
pružatelja u vašoj aplikaciji. Ovo je korisno za organizaciju vaših prijevoda i nizova u različite izvore, poput vašeg zaglavlja, podnožja ili određenih sekcija.
Možete pročitati više o korištenju izvora ovdje.
TacoTranslate
provideri nasljeđuju postavke od bilo kojeg roditeljskog providera, pa nećete morati ponavljati druge postavke.
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>
);
}
Zamjena izvora ili lokaliteta
Uz korištenje više TacoTranslate
providera, također možete nadjačati i origin i locale na razinama Translate
komponente i useTranslation
hooka.
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
Prilikom promjene jezika na strani klijenta, dohvaćanje prijevoda može potrajati nekoliko trenutaka ovisno o vezi korisnika. Možete prikazati indikator učitavanja kako biste poboljšali korisničko iskustvo pružajući vizualnu povratnu informaciju tijekom promjene.
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 temeljenih na brojkama na 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 pružatelja s različitim vrijednostima locale
kao što je prikazano u nastavku:
Također možete nadjačati locale
na razini 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štenje ID-jeva prijevoda
Možete dodati id
komponenti Translate
kako biste upravljali različitim prijevodima ili značenjima za isti niz. Ovo je posebno korisno kada isti tekst zahtijeva različite prijevode ovisno o kontekstu. Dodjeljivanjem jedinstvenih ID-eva osiguravate da je svaki primjerak niza toč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 primjer, prijava u zaglavlju može se prevesti kao “Iniciar sesión”, a prijava u podnožju može se prevesti kao “Acceder” na španjolskom.