Gevorderde gebruik
Hantering van regs-na-links tale
TacoTranslate maak dit maklik om regstryk-na-links (RTL) tale, soos Arabies en Hebreeus, in jou React-toepassings te ondersteun. Korrek hantering van RTL-tale verseker dat jou inhoud reg vertoon word vir gebruikers wat van regter na linkerkant lees.
import {useTacoTranslate} from 'tacotranslate/react';
function Document() {
const {locale, isRightToLeft} = useTacoTranslate();
return (
<html lang={locale} dir={isRightToLeft ? 'rtl' : 'ltr'}>
<body>
// ...
</body>
</html>
);
}
Jy 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 deaktiveer
Om vertaling vir spesifieke dele van ’n string uit te skakel of om te verseker dat sekere segmente onveranderd behou word, kan jy driedubbele vierkantige hakies gebruik. Hierdie funksie is nuttig om die oorspronklike formaat van name, tegniese terme, of enige ander inhoud wat nie vertaal moet word nie, te behou.
import {Translate} from 'tacotranslate/react';
function Component() {
return (
<Translate string="Hello, [[[TacoTranslate]]]!" />
);
}
In hierdie voorbeeld bly die woord “TacoTranslate” onveranderd in die vertaling.
Meervoudige TacoTranslate-verskaffers
Ons moedig sterk aan om verskeie TacoTranslate
verskaffers in jou program te gebruik. Dit is nuttig om jou vertalings en stringe te organiseer in verskillende oorspronge, soos jou kopstuk, voetskrif, of spesifieke afdelings.
Jy kan hier meer lees oor die gebruik van oorspronge.
TacoTranslate
verskaffers erf instellings van enige ouer-verskaffer, so jy hoef nie ander instellings 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 lokaal
Benewens die gebruik van verskeie TacoTranslate
verskaffers, kan u ook beide oorsprong en locale oorskryf op die vlakke van die Translate
komponent en die useTranslation
hook.
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 tale aan die kliëntkant verander word, kan die haal van vertalings ’n paar oomblikke neem, afhangend van die gebruiker se verbinding. Jy kan ’n laaimerkie vertoon om die gebruikerservaring te verbeter deur visuele terugvoer tydens die oorskakeling te verskaf.
import {useTacoTranslate} from 'tacotranslate/react';
function Component() {
const {isLoading} = useTacoTranslate();
return (
isLoading ? 'Translations are loading...' : null
);
}
Meervoudvorming
Om meervoudsvorming te hanteer en telgebaseerde etikette korrek in verskillende tale 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)}}
/>
);
}
Meertalige tale
Om meervoudige tale terselfdertyd binne dieselfde toepassing te ondersteun, kan u meervoudige TacoTranslate
verskaffers gebruik met verskillende locale
waardes soos hieronder getoon:
Jy kan ook die locale
op komponent- of hokkievlak 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 vertaal-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 verskillende vertalings vereis gebaseer op konteks. Deur unieke ID's toe te wys, verseker jy dat elke voorbeeld 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, kopstuk aanmelding kan vertaal na “Iniciar sesión”, en voetstuk aanmelding kan vertaal na “Acceder” in Spaans.