Išplėstinis naudojimas
Dešinės į kairę rašomų kalbų tvarkymas
TacoTranslate palengvina dešinėn į kairę (RTL) rašomų kalbų, tokių kaip arabų ir hebrajų, palaikymą jūsų React programose. Tinkamas RTL kalbų tvarkymas užtikrina, kad jūsų turinys būtų teisingai rodomas vartotojams, kurie skaito iš dešinės į kairę.
import {useTacoTranslate} from 'tacotranslate/react';
function Document() {
const {locale, isRightToLeft} = useTacoTranslate();
return (
<html lang={locale} dir={isRightToLeft ? 'rtl' : 'ltr'}>
<body>
// ...
</body>
</html>
);
}
Taip pat galite naudoti pateiktą funkciją isRightToLeftLocaleCode
norėdami patikrinti esamą kalbą už React ribų.
import {isRightToLeftLocaleCode} from 'tacotranslate';
function foo(locale = 'es') {
const direction = isRightToLeftLocaleCode(locale) ? 'rtl' : 'ltr';
// ...
}
Vertimo išjungimas
Norint išjungti vertimą tam tikroms eilutės dalims arba užtikrinti, kad tam tikri segmentai būtų išsaugoti nepakitę, galite naudoti trigubas kvadratines skliaustelius. Ši funkcija yra naudinga išlaikant originalų vardų, techninių terminų ar bet kokio kito turinio, kurio nereikėtų versti, formatą.
import {Translate} from 'tacotranslate/react';
function Component() {
return (
<Translate string="Hello, [[[TacoTranslate]]]!" />
);
}
Šiame pavyzdyje žodis „TacoTranslate“ vertime liks nepakitęs.
Keli TacoTranslate teikėjai
Mes labai rekomenduojame savo programoje naudoti kelis TacoTranslate
tiekėjus. Tai naudinga jūsų vertimų ir tekstų organizavimui į skirtingas kilmes, tokias kaip antraštė, poraštė ar konkrečios skiltys.
Jūs galite skaityti daugiau apie originų naudojimą čia.
TacoTranslate
tiekėjai paveldi nustatymus iš bet kurio tėvinio tiekėjo, todėl jums nereikės kartoti jokių kitų nustatymų.
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>
);
}
Pereinimas prie kito šaltinio arba lokalės
Be kelių TacoTranslate
tiekėjų naudojimo, taip pat galite perrašyti tiek kilmę, tiek lokalę Translate
komponento ir useTranslation
hook lygiuose.
import {Translate, useTranslation} from 'tacotranslate/react';
function Greeting() {
const spanishHello = useTranslation('Hello!', {locale: 'es'});
return (
<>
{spanishHello}
<Translate string="What’s up?" origin="greeting" />
</>
);
}
Įkėlimo valdymas
Kai keičiamos kalbos kliento pusėje, vertimų gavimas gali užtrukti kelias akimirkas, priklausomai nuo naudotojo ryšio. Norėdami pagerinti naudotojo patirtį, galite rodyti įkėlimo indikatorių, suteikdami vizualinį atsiliepimą perjungimo metu.
import {useTacoTranslate} from 'tacotranslate/react';
function Component() {
const {isLoading} = useTacoTranslate();
return (
isLoading ? 'Translations are loading...' : null
);
}
Daugiskaita
Norint teisingai tvarkyti daugiskaitą ir rodyti skaičių pagrįstus etiketės skirtingomis kalbomis, tai laikoma geriausia praktika:
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)}}
/>
);
}
Keli kalbos
Norėdami palaikyti kelias kalbas vienu metu toje pačioje programoje, galite naudoti kelis TacoTranslate
tiekėjus su skirtingomis locale
reikšmėmis, kaip parodyta žemiau:
Taip pat galite perrašyti locale
komponento arba hook'o lygyje.
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>
);
}
Naudojant vertimo ID
Jūs galite pridėti id
prie Translate
komponento, kad tvarkytumėte skirtingus to paties teksto vertimus ar reikšmes. Tai ypač naudinga, kai tas pats tekstas pagal kontekstą reikalauja skirtingų vertimų. Priskirdami unikalius ID, užtikrinate, kad kiekvienas to paties teksto atvejis būtų tiksliai išverstas pagal jo specifinę reikšmę.
import {Translate} from 'tacotranslate/react';
function Header() {
return (
<Translate id="header" string="Login" />
);
}
function Footer() {
return (
<Translate id="footer" string="Login" />
);
}
Pavyzdžiui, antraštės prisijungimas gali būti išverstas kaip „Iniciar sesión“, o poraštės prisijungimas – kaip „Acceder“ ispanų kalba.