Gevorderde gebruik
Hantering van reguit-na-links tale
TacoTranslate maak dit maklik om reg-naar-links (RTL) tale, soos Arabies en Hebreeus, in jou React-toepassings te ondersteun. Regte hantering van RTL-tale verseker dat jou inhoud korrek vertoon word vir gebruikers wat van reg 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>
);
}
Jy kan ook die voorsienede 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 te deaktiveer of om seker te maak sekere segmente word soos dit is bewaar, kan jy drievoudige vierkantige hakies gebruik. Hierdie kenmerk is nuttig om die oorspronklike formaat van name, tegniese terme, of enige ander inhoud wat nie vertaal moet word nie, te handhaaf.
import {Translate} from 'tacotranslate/react';
function Component() {
return (
<Translate string="Hello, [[[TacoTranslate]]]!" />
);
}
In hierdie voorbeeld sal die woord “TacoTranslate” onveranderd bly in die vertaling.
Meerdere TacoTranslate-verskaffers
Ons moedig sterk aan om meer as een TacoTranslate
verskaffer in jou app 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 origins.
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 landinstelling
Benewens die gebruik van verskeie TacoTranslate
verskaffers, kan jy ook beide oorsprong en locale oorskryf op die Translate
komponent en useTranslation
hook vlakke.
import {Translate, useTranslation} from 'tacotranslate/react';
function Greeting() {
const spanishHello = useTranslation('Hello!', {locale: 'es'});
return (
<>
{spanishHello}
<Translate string="What’s up?" origin="greeting" />
</>
);
}
Omgaan met laaityd
Wanneer u tale aan die kliëntsy wissel, kan dit ’n paar oomblikke neem om vertalings te laai, afhangende van die gebruiker se verbinding. U kan ’n laaiaanwyser 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 telling-gebaseerde 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)}}
/>
);
}
Meerdere tale
Om verskeie tale gelyktydig binne dieselfde toepassing te ondersteun, kan jy meerdere TacoTranslate
verskaffers gebruik met verskillende locale
waardes soos hieronder getoon:
Jy 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 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 benodig op grond van die konteks. Deur unieke ID's toe te ken, verseker jy dat elke geval 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 word na “Iniciar sesión”, en voetskrif-aanmelding kan vertaal word na “Acceder” in Spaans.