Täpsem kasutamine
Parempidiste keelade käsitlemine
TacoTranslate muudab lihtsaks paremale-vasakule (RTL) keelte, nagu araabia ja heebrea, toe lisamise teie Reacti rakendustes. Õige RTL-keelte 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>
);
}
Saate kasutada ka pakutud isRightToLeftLocaleCode
funktsiooni, et kontrollida praegust keelt väljaspool React-i.
import {isRightToLeftLocaleCode} from 'tacotranslate';
function foo(locale = 'es') {
const direction = isRightToLeftLocaleCode(locale) ? 'rtl' : 'ltr';
// ...
}
Tõlke keelamine
Tõlke keelamiseks stringi teatud osade jaoks või teatud segmentide säilitamiseks muutmata kujul saate kasutada kolmekordseid ruuduklambrilisi sulgusid. See funktsioon on kasulik nimede, tehniliste terminite või muu 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
pakkujat. See on kasulik teie tõlgete ja tekstide korraldamiseks erinevate päritolude alla, nagu teie päis, jalus või konkreetsed sektsioonid.
Saate siit lugeda lähemalt päritolude kasutamisest.
TacoTranslate
pakkujad pärivad seaded mistahes vanemapakkujalt, seega ei pea te muid sätteid 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>
);
}
Pärinemise või piirkonna ülekirjutamine
Lisaks mitme TacoTranslate
pakkuja kasutamisele saate samuti ülekirjutada nii päritolu kui ka lokaali Translate
komponendi ja useTranslation
hook'i tasemel.
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
Keele vahetamisel kliendi poolel võib tõlgete pärimine võtta paar hetke, sõltuvalt kasutaja ühendusest. Saate kuvada laadimisindikaatori, et parandada kasutajakogemust, pakkudes visuaalset tagasisidet vahetuse ajal.
import {useTacoTranslate} from 'tacotranslate/react';
function Component() {
const {isLoading} = useTacoTranslate();
return (
isLoading ? 'Translations are loading...' : null
);
}
Mitmuse vormid
Mitmuse käsitlemiseks ja arvupõhiste siltide korrektseks kuvamiseks erinevates keeltes peetakse seda parimaks praktiks:
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)}}
/>
);
}
Mitu keelt
Mitme keele samaaegseks toetamiseks samas rakenduses võite kasutada mitut TacoTranslate
pakkujat, kellel on erinevad locale
väärtused, nagu allpool näidatud:
Saate samuti üle kirjutada locale
komponendi või hook'i tasandil.
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
komponenti Translate
, et käsitleda sama stringi erinevaid tõlkeid või tähendusi. See on eriti kasulik, kui sama tekst vajab konteksti põhjal erinevaid tõlkeid. Unikaalsete ID-de määramisega tagate, et iga stringi eksemplar 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 sisselogimine tõlkida hispaania keeles kui „Iniciar sesión” ja jaluse sisselogimine kui „Acceder”.