Napredno korištenje
Rukovanje jezicima s desna na lijevo
TacoTranslate olakšava podršku jezicima koji se pišu s desna na lijevo (RTL), poput arapskog i hebrejskog, u vašim React aplikacijama. Ispravno rukovanje RTL jezicima osigurava da se vaš sadržaj prikazuje ispravno 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 isRightToLeftLocaleCode
funkciju 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 prevođenje za određene dijelove niza ili osigurali da su neki segmenti sačuvani takvi kakvi jesu, možete koristiti trostruke kvadratne zagrade. Ova značajka korisna je za očuvanje izvornog oblika imena, tehničkih termina ili bilo kojeg drugog sadržaja koji ne treba 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 TacoTranslate
Toplo preporučujemo korištenje više TacoTranslate
providera u vašoj aplikaciji. To je korisno za organiziranje vaših prijevoda i tekstova u različite izvore, poput zaglavlja, podnožja ili određenih odjeljaka.
Možete pročitati više o upotrebi origins ovdje.
TacoTranslate
provideri nasljeđuju postavke od bilo kojeg roditeljskog providera, pa nećete morati ponavljati nikakve 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>
);
}
Prepisivanje izvora ili lokala
Osim korištenja više TacoTranslate
pružatelja, također možete nadjačati i izvor i lokalnu postavku na razinama komponente Translate
i hooka useTranslation
.
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 promjeni jezika na strani klijenta dohvaćanje prijevoda može potrajati nekoliko trenutaka, ovisno o internetskoj 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 pluralizacijom i ispravan prikaz oznaka ovisnih 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 u istoj aplikaciji, možete koristiti više TacoTranslate davatelja s različitim locale
vrijednostima 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 identifikatora prijevoda
Možete dodati id
komponenti Translate
kako biste upravljali različitim prijevodima ili značenjima istog teksta. To je osobito korisno kada isti tekst zahtijeva različite prijevode ovisno o kontekstu. Dodjelom jedinstvenih ID-eva osiguravate da se svaki primjerak teksta točno 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 može se prevesti kao “Iniciar sesión”, a prijava u podnožju može se prevesti kao “Acceder” na španjolskom.