Täpsem kasutamine
Paremalt vasakule kirjutavate keelte käsitlemine
TacoTranslate muudab lihtsaks paremalt vasakule (RTL) kirjutatavate keelte, nagu araabia ja heebrea, toetamise teie React-rakendustes. RTL-keelte õige käsitlemine tagab, et teie sisu kuvatakse õigesti kasutajatele, kes loevad paremalt vasakule.
import {useTacoTranslate} from 'tacotranslate/react';
function Document() {
const {locale, isRightToLeft} = useTacoTranslate();
return (
<html lang={locale} dir={isRightToLeft ? 'rtl' : 'ltr'}>
<body>
// ...
</body>
</html>
);
}
Samuti saate kasutada pakutud isRightToLeftLocaleCode
funktsiooni, et kontrollida praegust keelt väljaspool React.
import {isRightToLeftLocaleCode} from 'tacotranslate';
function foo(locale = 'es') {
const direction = isRightToLeftLocaleCode(locale) ? 'rtl' : 'ltr';
// ...
}
Tõlke keelamine
Kui soovite keelata tõlkimise stringi teatud osades või tagada, et teatud lõigud säilitatakse muutmata kujul, võite kasutada kolmekordseid nurksulgusid. See funktsioon on kasulik nimede, tehniliste terminite või muu sellise sisu algse vormingu säilitamiseks, mida ei tohiks tõlkida.
import {Translate} from 'tacotranslate/react';
function Component() {
return (
<Translate string="Hello, [[[TacoTranslate]]]!" />
);
}
Selles näites jääb sõna “TacoTranslate” tõlkes muutumatuks.
Mitmed TacoTranslate'i pakkujad
Soovitame tungivalt kasutada oma rakenduses mitut TacoTranslate
providerit. See on kasulik teie tõlgete ja stringide korraldamiseks erinevatesse allikatesse, näiteks päisesse, jalusesse või kindlatesse osadesse.
Siit saate rohkem teada päritolude kasutamise kohta.
TacoTranslate
pakkujad pärivad seadeid mistahes vanempakkujalt, nii et te ei pea muid seadeid kordama.
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>
);
}
Algallika või lokaali ülekirjutamine
Lisaks mitme TacoTranslate
pakkuja kasutamisele saate ka nii päritolu kui ka lokaali üle kirjutada Translate
komponendi ja useTranslation
hooki tasandil.
import {Translate, useTranslation} from 'tacotranslate/react';
function Greeting() {
const spanishHello = useTranslation('Hello!', {locale: 'es'});
return (
<>
{spanishHello}
<Translate string="What’s up?" origin="greeting" />
</>
);
}
Laadimise käsitlemine
Kui vahetate keelt kliendipoolselt, võib tõlgete toomine sõltuvalt kasutaja ühendusest võtta mõne hetke. Vahetuse ajal saate kuvada laadimisindikaatori, et parandada kasutajakogemust ja anda visuaalset tagasisidet.
import {useTacoTranslate} from 'tacotranslate/react';
function Component() {
const {isLoading} = useTacoTranslate();
return (
isLoading ? 'Translations are loading...' : null
);
}
Mitmuse käsitlemine
Mitmuse käsitlemiseks ja arvupõhiste siltide korrektseks kuvamiseks erinevates keeltes loetakse seda parimaks praktikaks:
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)}}
/>
);
}
Mitmed keeled
Sama rakenduse sees mitme keele samaaegseks toetamiseks võite kasutada mitut TacoTranslate pakkujat erinevate locale
väärtustega, nagu allpool näidatud:
Saate locale
ka komponendi või hooki tasemel üle kirjutada.
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>
);
}
Tõlke-ID-de kasutamine
Saate lisada id
Translate
komponendile, et käsitleda sama stringi erinevaid tõlkeid või tähendusi. See on eriti kasulik, kui sama tekst nõuab kontekstist sõltuvalt erinevaid tõlkeid. Unikaalsete ID-de määramisel tagate, et iga stringi esinemine tõlgitakse täpselt vastavalt selle konkreetsele tähendusele.
import {Translate} from 'tacotranslate/react';
function Header() {
return (
<Translate id="header" string="Login" />
);
}
function Footer() {
return (
<Translate id="footer" string="Login" />
);
}
Näiteks võib päise sisselogimise tekst hispaania keeles olla “Iniciar sesión” ja jaluse sisselogimise tekst “Acceder”.