Gevorderde gebruik
Omgang met regs-na-links tale
TacoTranslate maak dit maklik om tale wat van regs na links gelees word (RTL), soos Arabies en Hebreeus, in jou React-toepassings te ondersteun. Die korrekte hantering van RTL-tale verseker dat jou inhoud reg vertoon word vir gebruikers wat van regs na links lees.
import {useTacoTranslate} from 'tacotranslate/react';
function Document() {
const {locale, isRightToLeft} = useTacoTranslate();
return (
<html lang={locale} dir={isRightToLeft ? 'rtl' : 'ltr'}>
<body>
// ...
</body>
</html>
);
}
U kan ook die verskafde isRightToLeftLocaleCode
funksie gebruik om die huidige taal buite React te kontroleer.
import {isRightToLeftLocaleCode} from 'tacotranslate';
function foo(locale = 'es') {
const direction = isRightToLeftLocaleCode(locale) ? 'rtl' : 'ltr';
// ...
}
Vertaling uitskakelen
Om vertaling vir spesifieke dele van ’n string uit te skakel of om te verseker dat sekere segmente onveranderd bly, kan jy drievoudige vierkante hakies gebruik. Hierdie funksie is nuttig om die oorspronklike formaat van name, tegniese terme of enige ander inhoud wat nie vertaal behoort te word nie, te behou.
import {Translate} from 'tacotranslate/react';
function Component() {
return (
<Translate string="Hello, [[[TacoTranslate]]]!" />
);
}
In hierdie voorbeeld sal die woord “TacoTranslate” onveranderd in die vertaling bly.
Meerdere TacoTranslate-aanbieders
Ons beveel sterk aan om verskeie TacoTranslate
verskaffers in jou app te gebruik. Dit is nuttig om jou vertalings en stringe in verskillende oorspronge te organiseer, soos jou kopafdeling, voetafdeling of spesifieke afdelings.
Jy kan hier meer lees oor die gebruik van oorspronge.
TacoTranslate
aanbieders erf instellings van enige ouer-aanbieder, sodat jy nie ander instellings hoef te herhaal nie.
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>
);
}
Oorskryf oorsprong of streekinstelling
Benewens die gebruik van verskeie TacoTranslate
verskaffers, kan jy ook beide oorsprong en lokaal op die Translate
komponent- en useTranslation
hookvlakke oorskryf.
import {Translate, useTranslation} from 'tacotranslate/react';
function Greeting() {
const spanishHello = useTranslation('Hello!', {locale: 'es'});
return (
<>
{spanishHello}
<Translate string="What’s up?" origin="greeting" />
</>
);
}
Hantering van laai
Wanneer die taal aan die kliëntkant verander word, kan dit 'n paar oomblikke neem om vertalings op te haal, afhangende van die gebruiker se verbinding. U kan 'n laai-aanwyser vertoon om die gebruikerservaring te verbeter deur visuele terugvoer tydens die oorskakeling te bied.
import {useTacoTranslate} from 'tacotranslate/react';
function Component() {
const {isLoading} = useTacoTranslate();
return (
isLoading ? 'Translations are loading...' : null
);
}
Meervoudsvorming
Om meervoudsvorming te hanteer en telgebaseerde etikette in verskillende tale korrek te vertoon, word dit as beste praktyk beskou:
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)}}
/>
);
}
Meerdere tale
Om verskeie tale tegelyk in dieselfde toepassing te ondersteun, kan jy meerdere TacoTranslate-verskaffers gebruik met verskillende locale
waardes soos hieronder getoon:
U kan ook die locale
op die komponent- of hookvlak oorskryf.
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>
);
}
Gebruik van vertalings-ID's
Jy kan 'n id
by die Translate
komponent voeg om verskillende vertalings of betekenisse vir dieselfde string te hanteer. Dit is veral nuttig wanneer dieselfde teks, afhangend van die konteks, verskillende vertalings nodig het. Deur unieke ID's toe te ken, verseker jy dat elke voorkoms van die string akkuraat vertaal word volgens sy spesifieke betekenis.
import {Translate} from 'tacotranslate/react';
function Header() {
return (
<Translate id="header" string="Login" />
);
}
function Footer() {
return (
<Translate id="footer" string="Login" />
);
}
Byvoorbeeld kan die kopstuk-aanmelding na “Iniciar sesión” en die voetskrif-aanmelding na “Acceder” in Spaans vertaal word.