Geavanceerd gebruik
Omgaan met rechts-naar-links-talen
TacoTranslate maakt het gemakkelijk om talen van rechts naar links (RTL), zoals Arabisch en Hebreeuws, te ondersteunen in je React-applicaties. Correcte verwerking van RTL-talen zorgt ervoor dat je inhoud goed wordt weergegeven voor gebruikers die van rechts naar links lezen.
import {useTacoTranslate} from 'tacotranslate/react';
function Document() {
const {locale, isRightToLeft} = useTacoTranslate();
return (
<html lang={locale} dir={isRightToLeft ? 'rtl' : 'ltr'}>
<body>
// ...
</body>
</html>
);
}
U kunt ook de meegeleverde isRightToLeftLocaleCode
functie gebruiken om de huidige taal buiten React te controleren.
import {isRightToLeftLocaleCode} from 'tacotranslate';
function foo(locale = 'es') {
const direction = isRightToLeftLocaleCode(locale) ? 'rtl' : 'ltr';
// ...
}
Vertaling uitschakelen
Om vertaling voor specifieke delen van een tekst uit te schakelen of om te zorgen dat bepaalde segmenten ongewijzigd blijven, kun je drievoudige vierkante haken gebruiken. Deze functie is handig om het oorspronkelijke formaat van namen, technische termen of andere inhoud die niet vertaald mogen worden, te behouden.
import {Translate} from 'tacotranslate/react';
function Component() {
return (
<Translate string="Hello, [[[TacoTranslate]]]!" />
);
}
In dit voorbeeld blijft het woord “TacoTranslate” ongewijzigd in de vertaling.
Meerdere TacoTranslate-providers
Wij raden ten zeerste aan om meerdere TacoTranslate
providers in uw app te gebruiken. Dit is nuttig om uw vertalingen en strings in verschillende origins te organiseren, zoals uw koptekst, voettekst of specifieke secties.
Je kunt hier meer lezen over het gebruik van origins.
TacoTranslate
providers erven instellingen van een bovenliggende provider, dus je hoeft geen andere instellingen te herhalen.
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>
);
}
Origin of locale overschrijven
Naast het gebruik van meerdere TacoTranslate
providers kunt u ook zowel origin als locale overschrijven op het niveau van de Translate
component en de 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" />
</>
);
}
Omgaan met laden
Wanneer je de taal aan de clientzijde verandert, kan het ophalen van vertalingen even duren, afhankelijk van de internetverbinding van de gebruiker. Je kunt een laadindicator weergeven om de gebruikerservaring te verbeteren door tijdens het wisselen visuele feedback te geven.
import {useTacoTranslate} from 'tacotranslate/react';
function Component() {
const {isLoading} = useTacoTranslate();
return (
isLoading ? 'Translations are loading...' : null
);
}
Pluralisatie
Om meervoudsvormen te behandelen en labels op basis van aantallen in verschillende talen correct weer te geven, wordt dit als goede praktijk beschouwd:
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 talen
Om meerdere talen tegelijk binnen dezelfde applicatie te ondersteunen, kun je meerdere TacoTranslate-providers gebruiken met verschillende locale
waarden zoals hieronder weergegeven:
Je kunt ook de locale
op component- of hookniveau overschrijven.
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>
);
}
Vertaal-ID's gebruiken
U kunt een id
toevoegen aan de Translate
component om verschillende vertalingen of betekenissen voor dezelfde tekst te beheren. Dit is vooral nuttig wanneer dezelfde tekst, afhankelijk van de context, verschillende vertalingen vereist. Door unieke ID's toe te wijzen, zorgt u ervoor dat elke instantie van de tekst nauwkeurig wordt vertaald volgens de specifieke betekenis.
import {Translate} from 'tacotranslate/react';
function Header() {
return (
<Translate id="header" string="Login" />
);
}
function Footer() {
return (
<Translate id="footer" string="Login" />
);
}
Bijvoorbeeld kan de login in de koptekst vertaald worden als “Iniciar sesión”, en de login in de voettekst als “Acceder” in het Spaans.