Napredno korištenje
Rukovanje jezicima s desna na lijevo
TacoTranslate olakšava podršku jezicima koji se čitaju 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 priloženu isRightToLeftLocaleCode
funkciju da provjerite 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 dijelova niza ili osigurali da su neki segmenti sačuvani nepromijenjeni, možete koristiti trostruke uglaste zagrade. Ova funkcija je korisna za očuvanje izvornog formata imena, tehničkih termina ili bilo kojeg drugog sadržaja koji ne bi trebao biti preveden.
import {Translate} from 'tacotranslate/react';
function Component() {
return (
<Translate string="Hello, [[[TacoTranslate]]]!" />
);
}
U ovom primjeru, riječ “TacoTranslate” ostat će nepromijenjena u prijevodu.
Više TacoTranslate provajdera
Toplo preporučujemo korištenje više TacoTranslate
provajdera u vašoj aplikaciji. Ovo je korisno za organiziranje vaših prijevoda i stringova u različite izvore, kao što su zaglavlje, podnožje ili određeni odjeljci.
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 nijednu drugu postavku.
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>
);
}
Nadjačavanje origin-a ili lokala
Pored korištenja više TacoTranslate
provajdera, možete također prebrisati i porijeklo i lokalne postavke 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, učitavanje prijevoda 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 prebacivanja.
import {useTacoTranslate} from 'tacotranslate/react';
function Component() {
const {isLoading} = useTacoTranslate();
return (
isLoading ? 'Translations are loading...' : null
);
}
Pluralizacija
Za pravilno rukovanje pluralizacijom i prikazivanje oznaka koje ovise o broju 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 unutar iste aplikacije, možete koristiti više TacoTranslate provajdera s različitim locale
vrijednostima kao što je prikazano u nastavku:
Također možete prebrisati 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štenje ID-ova prijevoda
Možete dodati id
komponenti Translate
kako biste omogućili različite prijevode ili značenja istog teksta. Ovo je posebno korisno kada isti tekst zahtijeva različite prijevode ovisno o kontekstu. Dodjeljivanjem jedinstvenih ID-eva osiguravate da se svaki primjerak teksta pravilno prevede 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 se može prevesti kao “Iniciar sesión”, a prijava u podnožju se može prevesti kao “Acceder” na španskom.