Advanced na paggamit
Paghawak ng mga wikang mula kanan papuntang kaliwa
Pinapadali ng TacoTranslate ang pagsuporta sa mga wikang bumabasa mula kanan papuntang kaliwa (RTL), tulad ng Arabe at Hebreo, sa iyong mga React na aplikasyon. Tinitiyak ng wastong paghawak ng mga RTL na wika na ipinapakita nang tama ang iyong nilalaman para sa mga gumagamit na nagbabasa mula kanan papuntang kaliwa.
import {useTacoTranslate} from 'tacotranslate/react';
function Document() {
const {locale, isRightToLeft} = useTacoTranslate();
return (
<html lang={locale} dir={isRightToLeft ? 'rtl' : 'ltr'}>
<body>
// ...
</body>
</html>
);
}
Maaari mo ring gamitin ang ibinigay na isRightToLeftLocaleCode
na function upang suriin ang kasalukuyang wika sa labas ng React.
import {isRightToLeftLocaleCode} from 'tacotranslate';
function foo(locale = 'es') {
const direction = isRightToLeftLocaleCode(locale) ? 'rtl' : 'ltr';
// ...
}
Pagpapahinto ng pagsasalin
Upang hindi isalin ang mga partikular na bahagi ng isang string o upang matiyak na ang ilang bahagi ay mananatiling hindi nabago, maaari mong gamitin ang tatlong magkakasunod na panaklong na parisukat. Kapaki-pakinabang ang tampok na ito para panatilihin ang orihinal na pormat ng mga pangalan, mga teknikal na termino, o anumang iba pang nilalaman na hindi dapat isalin.
import {Translate} from 'tacotranslate/react';
function Component() {
return (
<Translate string="Hello, [[[TacoTranslate]]]!" />
);
}
Sa halimbawang ito, ang salitang “TacoTranslate” ay mananatiling hindi nababago sa pagsasalin.
Maraming provider ng TacoTranslate
Mahigpit naming hinihikayat ang paggamit ng maraming TacoTranslate
provider sa iyong app. Makatutulong ito sa pag-aayos ng iyong mga pagsasalin at mga string sa iba't ibang pinagmulan, tulad ng iyong header, footer, o mga partikular na seksyon.
Maaari kang magbasa pa tungkol sa paggamit ng origins dito.
Ang mga provider ng TacoTranslate
ay namamana ang mga setting mula sa anumang magulang na provider, kaya hindi mo na kailangang ulitin ang iba pang mga setting.
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>
);
}
Pag-override ng origin o locale
Bilang karagdagan sa paggamit ng maraming TacoTranslate
provider, maaari mo ring i-override ang parehong pinagmulan at lokalidad sa antas ng Translate
na komponent at useTranslation
na hook.
import {Translate, useTranslation} from 'tacotranslate/react';
function Greeting() {
const spanishHello = useTranslation('Hello!', {locale: 'es'});
return (
<>
{spanishHello}
<Translate string="What’s up?" origin="greeting" />
</>
);
}
Pamamahala ng paglo-load
Kapag nagbabago ang wika sa client side, maaaring tumagal ng ilang sandali ang pagkuha ng mga salin depende sa koneksyon ng gumagamit. Maaari kang magpakita ng loading indicator upang pagandahin ang karanasan ng gumagamit sa pamamagitan ng pagbibigay ng biswal na tugon habang nagaganap ang paglipat.
import {useTacoTranslate} from 'tacotranslate/react';
function Component() {
const {isLoading} = useTacoTranslate();
return (
isLoading ? 'Translations are loading...' : null
);
}
Pagpaplural
Upang maayos na hawakan ang pluralization at wastong ipakita ang mga label na nakabase sa bilang sa iba't ibang wika, itinuturing itong pinakamahusay na kasanayan:
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)}}
/>
);
}
Maramihang wika
Upang suportahan ang maramihang mga wika nang sabay-sabay sa parehong aplikasyon, maaari kang gumamit ng maraming provider ng TacoTranslate na may iba't ibang locale
na mga halaga tulad ng ipinapakita sa ibaba:
Maaari mo ring i-override ang locale
sa antas ng component o 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>
);
}
Paggamit ng mga ID ng pagsasalin
Maaari kang magdagdag ng id
sa Translate
na komponent upang hawakan ang iba't ibang pagsasalin o kahulugan para sa parehong string. Lalo itong kapaki-pakinabang kapag ang parehong teksto ay nangangailangan ng magkakaibang pagsasalin batay sa konteksto. Sa pamamagitan ng pagbibigay ng mga natatanging ID, tinitiyak mong ang bawat halimbawa ng string ay maisasalin nang tama ayon sa partikular nitong kahulugan.
import {Translate} from 'tacotranslate/react';
function Header() {
return (
<Translate id="header" string="Login" />
);
}
function Footer() {
return (
<Translate id="footer" string="Login" />
);
}
Halimbawa, ang header login ay maaaring isalin bilang “Iniciar sesión”, at ang footer login ay maaaring isalin bilang “Acceder” sa Espanyol.