Documentatie: Geavanceerd gebruik

Geavanceerd gebruik

Dutch

Omgaan met talen van rechts naar links

TacoTranslate maakt het eenvoudig om rechts-naar-links (RTL) talen, zoals Arabisch en Hebreeuws, in uw React-applicaties te ondersteunen. Een juiste afhandeling van RTL-talen zorgt ervoor dat uw 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 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 uit te schakelen voor specifieke delen van een tekenreeks of om ervoor te zorgen dat bepaalde segmenten onveranderd blijven, kunt u drievoudige 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

Wij raden ten zeerste aan meerdere TacoTranslate providers in uw app te gebruiken. Dit is handig om uw vertalingen en strings te organiseren in verschillende origins, zoals uw header, footer of specifieke secties.

U 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>
	);
}

Het overschrijven van origin 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 even duren, afhankelijk van de verbinding van de gebruiker. U kunt een laadindicator tonen om de gebruikerservaring te verbeteren door tijdens de wissel visuele feedback te geven.

import {useTacoTranslate} from 'tacotranslate/react';

function Component() {
	const {isLoading} = useTacoTranslate();

	return (
		isLoading ? 'Translations are loading...' : null
	);
}

Meervoudsvorming

Om meervoud en labels op basis van aantallen in verschillende talen correct af te handelen, 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, kun je meerdere TacoTranslate-providers gebruiken met verschillende locale waarden zoals hieronder wordt weergegeven:

U 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>
	);
}

Vertaalsleutels gebruiken

Je 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, anders vertaald moet worden. Door unieke ID's toe te wijzen zorg je ervoor dat elke instantie van de tekst nauwkeurig wordt vertaald naar 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 header vertaald worden als “Iniciar sesión”, en de login in de footer als “Acceder” in het Spaans.

Beste praktijken