Matumizi ya juu
Kushughulikia lugha zinazosomwa kutoka kulia kwenda kushoto
TacoTranslate inafanya iwe rahisi kuunga mkono lugha zinazosomwa kutoka kulia kwenda kushoto (RTL), kama Kiarabu na Kiebrania, katika programu zako za React. Kushughulikia kwa usahihi lugha za RTL kunahakikisha maudhui yako yanaonyeshwa ipasavyo kwa watumiaji wanaosoma kutoka kulia kwenda kushoto.
import {useTacoTranslate} from 'tacotranslate/react';
function Document() {
const {locale, isRightToLeft} = useTacoTranslate();
return (
<html lang={locale} dir={isRightToLeft ? 'rtl' : 'ltr'}>
<body>
// ...
</body>
</html>
);
}
Unaweza pia kutumia kazi iliyotolewa isRightToLeftLocaleCode
ili kukagua lugha ya sasa nje ya React.
import {isRightToLeftLocaleCode} from 'tacotranslate';
function foo(locale = 'es') {
const direction = isRightToLeftLocaleCode(locale) ? 'rtl' : 'ltr';
// ...
}
Kuzima tafsiri
Ili kuzima tafsiri kwa sehemu maalum za mnyororo au kuhakikisha sehemu fulani zihifadhiwe kama zilivyo, unaweza kutumia mabano matatu ya mraba. Kipengele hiki kinasaidia kudumisha muundo wa asili wa majina, istilahi za kiufundi, au maudhui mengine yoyote ambayo hayapaswi kutafsiriwa.
import {Translate} from 'tacotranslate/react';
function Component() {
return (
<Translate string="Hello, [[[TacoTranslate]]]!" />
);
}
Katika mfano huu, neno “TacoTranslate” litabaki bila kubadilika katika tafsiri.
Watoaji wengi wa TacoTranslate
Tunashauri sana kutumia watoa huduma kadhaa wa TacoTranslate
katika programu yako. Hili ni muhimu kwa kupanga tafsiri zako na nyuzi za maandishi katika vyanzo tofauti, kama vile kichwa, sehemu ya chini, au sehemu maalum.
Soma zaidi kuhusu kutumia vyanzo hapa.
Watoaji wa TacoTranslate
warithi mipangilio kutoka kwa mtoa huduma mzazi yeyote, hivyo hautahitaji kurudia mipangilio mingine yoyote.
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>
);
}
Kubadilisha asili au eneo
Mbali na kutumia watoa huduma wengi wa TacoTranslate
, unaweza pia kubadilisha asili na locale kwenye ngazi za komponenti ya Translate
na hook ya useTranslation
.
import {Translate, useTranslation} from 'tacotranslate/react';
function Greeting() {
const spanishHello = useTranslation('Hello!', {locale: 'es'});
return (
<>
{spanishHello}
<Translate string="What’s up?" origin="greeting" />
</>
);
}
Kushughulikia upakiaji
Wakati unabadilisha lugha upande wa mteja, kupakua tafsiri kunaweza kuchukua muda mfupi kulingana na muunganisho wa mtumiaji. Unaweza kuonyesha kiashiria cha kupakia ili kuboresha uzoefu wa mtumiaji kwa kutoa mrejesho wa kuona wakati wa mchakato wa kubadilisha lugha.
import {useTacoTranslate} from 'tacotranslate/react';
function Component() {
const {isLoading} = useTacoTranslate();
return (
isLoading ? 'Translations are loading...' : null
);
}
Uwingaji
Ili kushughulikia utofautishaji wa wingi na kuonyesha lebo zinazoendana na idadi kwa usahihi katika lugha tofauti, hii inachukuliwa kuwa mbinu bora:
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)}}
/>
);
}
Lugha nyingi
Ili kuunga mkono lugha nyingi kwa wakati mmoja ndani ya programu moja, unaweza kutumia watoa huduma kadhaa za TacoTranslate wenye thamani tofauti za locale
kama inavyoonyeshwa hapa chini:
Unaweza pia kubadilisha locale
kwa ngazi ya komponenti au hook.
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>
);
}
Kutumia vitambulisho vya tafsiri
Unaweza kuongeza id
kwenye komponenti ya Translate
ili kushughulikia tafsiri tofauti au maana tofauti kwa kamba ile ile. Hii ni muhimu hasa wakati maandishi yale yale yanapotahitaji tafsiri tofauti kulingana na muktadha. Kwa kutenga vitambulisho vya kipekee, unahakikisha kwamba kila mfano wa kamba unatafsiriwa kwa usahihi kulingana na maana yake maalum.
import {Translate} from 'tacotranslate/react';
function Header() {
return (
<Translate id="header" string="Login" />
);
}
function Footer() {
return (
<Translate id="footer" string="Login" />
);
}
Kwa mfano, kitufe la kuingia kwenye sehemu ya juu linaweza kutafsiriwa kama “Iniciar sesión”, na kitufe la kuingia kwenye sehemu ya chini linaweza kutafsiriwa kama “Acceder” kwa Kihispania.