Geavanceerd gebruik
Omgaan met talen van rechts naar links
TacoTranslate maakt het eenvoudig om talen die van rechts naar links (RTL) worden gelezen, zoals Arabisch en Hebreeuws, te ondersteunen in je React-toepassingen. Correcte verwerking van RTL-talen zorgt ervoor dat je inhoud correct 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>
);
}
Je kunt ook de meegeleverde functie isRightToLeftLocaleCode
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, kunt u driedubbele vierkante haken gebruiken. Deze functie is handig om het oorspronkelijke formaat van namen, technische termen of andere inhoud die niet vertaald mag 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
We raden sterk aan om meerdere TacoTranslate
providers in je app te gebruiken. Dit is handig voor het organiseren van je vertalingen en strings in verschillende origins, zoals je header, footer 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>
);
}
Overschrijven van oorsprong of locale
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" />
</>
);
}
Laden afhandelen
Wanneer u de taal aan de clientzijde wijzigt, kan het ophalen van vertalingen afhankelijk van de verbinding van de gebruiker een paar momenten duren. U kunt een laadindicator weergeven om de gebruikerservaring te verbeteren door visuele feedback te geven tijdens de wissel.
import {useTacoTranslate} from 'tacotranslate/react';
function Component() {
const {isLoading} = useTacoTranslate();
return (
isLoading ? 'Translations are loading...' : null
);
}
Meervoudsuitdrukkingen
Om meervoudsvormen te behandelen en tellingsgebonden labels correct weer te geven in verschillende talen, wordt dit beschouwd als beste praktijk:
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 tegelijkertijd binnen dezelfde applicatie te ondersteunen, kunt u 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>
);
}
Vertalen met behulp van vertaal-ID's
Je kunt een id
toevoegen aan de Translate
component om verschillende vertalingen of betekenissen voor dezelfde string te verwerken. Dit is vooral nuttig wanneer dezelfde tekst verschillende vertalingen vereist op basis van de context. Door unieke ID’s toe te wijzen, zorg je ervoor dat elke instantie van de string 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" />
);
}
Een voorbeeld is dat header login kan worden vertaald naar “Iniciar sesión”, en footer login kan worden vertaald naar “Acceder” in het Spaans.