Napredna uporaba
Ravnanje s jeziki, ki berejo od desne proti levi
TacoTranslate omogoča enostavno podporo jezikom, ki se berejo od desne proti levi (RTL), kot sta arabščina in hebrejščina, v vaših React aplikacijah. Pravilno ravnanje z RTL jeziki zagotavlja, da se vaša vsebina pravilno prikazuje uporabnikom, ki berejo od desne proti levi.
import {useTacoTranslate} from 'tacotranslate/react';
function Document() {
const {locale, isRightToLeft} = useTacoTranslate();
return (
<html lang={locale} dir={isRightToLeft ? 'rtl' : 'ltr'}>
<body>
// ...
</body>
</html>
);
}
Lahko uporabite tudi priloženo funkcijo isRightToLeftLocaleCode
za preverjanje trenutnega jezika izven okolja React.
import {isRightToLeftLocaleCode} from 'tacotranslate';
function foo(locale = 'es') {
const direction = isRightToLeftLocaleCode(locale) ? 'rtl' : 'ltr';
// ...
}
Onemogočanje prevajanja
Če želite onemogočiti prevajanje določenih delov niza ali zagotoviti, da so nekateri segmenti ohranjeni nespremenjeni, lahko uporabite trojne oglate oklepaje. Ta funkcija je uporabna za ohranjanje izvirne oblike imen, tehničnih izrazov ali katere koli druge vsebine, ki je ne bi smeli prevajati.
import {Translate} from 'tacotranslate/react';
function Component() {
return (
<Translate string="Hello, [[[TacoTranslate]]]!" />
);
}
V tem primeru bo beseda “TacoTranslate” v prevodu ostala nespremenjena.
Več ponudnikov TacoTranslate
Zelo priporočamo uporabo več ponudnikov TacoTranslate
v vaši aplikaciji. To je uporabno za organizacijo vaših prevodov in nizov v različne izvore, kot so vaša glava, noga ali določeni odseki.
Lahko preberete več o uporabi virov tukaj.
Ponudniki TacoTranslate
dedujejo nastavitve od katerega koli nadrejenga ponudnika, zato vam ni treba ponavljati drugih nastavitev.
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>
);
}
Preglasitev izvora ali lokalne nastavitve
Poleg uporabe več TacoTranslate
ponudnikov lahko tudi nadomestite tako origin kot locale na nivojih Translate
komponente in useTranslation
hooka.
import {Translate, useTranslation} from 'tacotranslate/react';
function Greeting() {
const spanishHello = useTranslation('Hello!', {locale: 'es'});
return (
<>
{spanishHello}
<Translate string="What’s up?" origin="greeting" />
</>
);
}
Ravnanje z nalaganjem
Pri spremembi jezika na strani odjemalca lahko pridobivanje prevodov traja nekaj trenutkov, odvisno od uporabnikove povezave. Za izboljšanje uporabniške izkušnje lahko med preklopom prikažete indikator nalaganja, ki zagotavlja vizualno povratno informacijo.
import {useTacoTranslate} from 'tacotranslate/react';
function Component() {
const {isLoading} = useTacoTranslate();
return (
isLoading ? 'Translations are loading...' : null
);
}
Množinska oblikovanje
Za pravilno obravnavanje množinske oblike in pravilno prikazovanje oznak glede na število v različnih jezikih velja to za najboljšo prakso:
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)}}
/>
);
}
Več jezikov
Za podporo več jezikom hkrati v isti aplikaciji lahko uporabite več ponudnikov TacoTranslate
z različnimi vrednostmi locale
kot je prikazano spodaj:
Prav tako lahko preglavite locale
na ravni komponente ali hooka.
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>
);
}
Uporaba ID-jev prevodov
Lahko dodate id
komponenti Translate
, da upravljate različne prevode ali pomene za isti niz. To je posebej uporabno, kadar isti tekst zahteva različne prevode glede na kontekst. Z dodeljevanjem edinstvenih ID-jev zagotovite, da je vsak primerek niza pravilno preveden glede na njegov specifični pomen.
import {Translate} from 'tacotranslate/react';
function Header() {
return (
<Translate id="header" string="Login" />
);
}
function Footer() {
return (
<Translate id="footer" string="Login" />
);
}
Na primer, prijava v glavi se lahko prevede kot “Iniciar sesión”, v nogi pa kot “Acceder” v španščini.