Háþróuð notkun
Meðhöndlun tungumála sem eru lesin frá hægri til vinstri
TacoTranslate gerir auðvelt að styðja tungumál sem lesa skal frá hægri til vinstri (RTL), svo sem arabísku og hebresku, í React forritum þínum. Rétt meðhöndlun RTL tungumála tryggir að efni þitt sé sýnt rétt fyrir notendur sem lesa frá hægri til vinstri.
import {useTacoTranslate} from 'tacotranslate/react';
function Document() {
const {locale, isRightToLeft} = useTacoTranslate();
return (
<html lang={locale} dir={isRightToLeft ? 'rtl' : 'ltr'}>
<body>
// ...
</body>
</html>
);
}
Þú getur einnig notað isRightToLeftLocaleCode
fallið sem fylgir til að athuga núverandi tungumál utan React.
import {isRightToLeftLocaleCode} from 'tacotranslate';
function foo(locale = 'es') {
const direction = isRightToLeftLocaleCode(locale) ? 'rtl' : 'ltr';
// ...
}
Afnema þýðingu
Til að slökkva á þýðingu fyrir ákveðna hluta strengs eða til að tryggja að ákveðnir kaflar verði varðveittir óbreyttir, getur þú notað þrjár ferkantaðar hornklofa. Þessi eiginleiki er gagnlegur til að viðhalda upprunalegu sniði nafna, tæknilegum hugtökum eða öðru innihaldi sem má ekki þýða.
import {Translate} from 'tacotranslate/react';
function Component() {
return (
<Translate string="Hello, [[[TacoTranslate]]]!" />
);
}
Í þessu dæmi verður orðið „TacoTranslate“ óbreytt í þýðingunni.
Fjölmargir TacoTranslate veitendur
Við hvetjum eindregið til að nota marga TacoTranslate
veitendur í forritinu þínu. Þetta er gagnlegt til að skipuleggja þýðingar þínar og texta í mismunandi uppruna, eins og haus, fót eða sérstakar kafla.
Þú getur lesið meira um að nota uppruna hér.
TacoTranslate
veitendur erfa stillingar frá hvaða yfirliggjandi veitanda sem er, svo þú þarft ekki að endurtaka aðrar stillingar.
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>
);
}
Yfirstýring uppruna eða svæðis
Auk þess að nota marga TacoTranslate
veitendur, getur þú einnig yfirstýrt bæði uppruna og tungumálsstillingu á Translate
íhlutanum og useTranslation
klemma-stigunum.
import {Translate, useTranslation} from 'tacotranslate/react';
function Greeting() {
const spanishHello = useTranslation('Hello!', {locale: 'es'});
return (
<>
{spanishHello}
<Translate string="What’s up?" origin="greeting" />
</>
);
}
Meðhöndlun hleðslu
Þegar skipt er um tungumál í viðskiptavinshliðinni getur það tekið smá stund að sækja þýðingar, allt eftir tengingu notandans. Þú getur sýnt hleðsluvísir til að bæta notendaupplifunina með því að gefa sjónræna endurgjöf á meðan umskiptin fara fram.
import {useTacoTranslate} from 'tacotranslate/react';
function Component() {
const {isLoading} = useTacoTranslate();
return (
isLoading ? 'Translations are loading...' : null
);
}
Fleirtölumerking
Til að meðhöndla fleirtölu og sýna talnamiðuð merki rétt á mismunandi tungumálum er þetta talið bestu framkvæmdin:
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)}}
/>
);
}
Fjölmörg tungumál
Til að styðja mörg tungumál samtímis innan sömu vöru getur þú notað marga TacoTranslate veitendur með mismunandi locale
gildum eins og sýnt er hér að neðan:
Þú getur einnig yfirskrifað locale
á þætti- eða krókhætti.
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>
);
}
Að nota þýðingarauðkenni
Þú getur bætt við id
á Translate
íhlutinn til að meðhöndla mismunandi þýðingar eða merkingar fyrir sama strenginn. Þetta er sérstaklega gagnlegt þegar sami texti krefst mismunandi þýðinga eftir samhengi. Með því að úthluta einstökum ID-um tryggir þú að hver eintak strengsins sé þýtt nákvæmlega í samræmi við sína sérstæðu merkingu.
import {Translate} from 'tacotranslate/react';
function Header() {
return (
<Translate id="header" string="Login" />
);
}
function Footer() {
return (
<Translate id="footer" string="Login" />
);
}
Til dæmis gæti header login þýtt „Iniciar sesión“ og footer login gæti þýtt „Acceder“ á spænsku.