Documentatie: Geavanceerd gebruik

Geavanceerd gebruik

Dutch

Omgaan met talen die van rechts naar links worden geschreven

Met TacoTranslate is het eenvoudig om rechts-naar-links (RTL)-talen, zoals Arabisch en Hebreeuws, te ondersteunen in uw React-applicaties. 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>
	);
}

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 uit te schakelen voor specifieke delen van een tekst of om ervoor te zorgen dat bepaalde segmenten precies zo blijven als ze zijn, kun je drievoudige vierkante haken gebruiken. Deze functie is handig om de oorspronkelijke opmaak 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 ten zeerste aan om meerdere TacoTranslate providers in uw app te gebruiken. Dit is handig om uw vertalingen en strings in verschillende bronnen te organiseren, zoals uw header, footer of specifieke secties.

Je kunt hier meer lezen over het gebruik van origins.

TacoTranslate providers erven instellingen van elke bovenliggende provider, zodat je andere instellingen niet hoeft 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 het 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 u de taal aan de clientzijde wijzigt, kan het ophalen van vertalingen enige tijd duren, afhankelijk van de verbinding van de gebruiker. U kunt een laadindicator weergeven om de gebruikerservaring te verbeteren door visuele feedback te geven tijdens het wisselen.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Meervoud

Om meervoudsvormen te behandelen en telgebaseerde labels in verschillende talen correct weer te geven, wordt dit als beste 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 tegelijkertijd binnen dezelfde applicatie te ondersteunen, kunt u meerdere TacoTranslate-providers gebruiken met verschillende locale waarden zoals hieronder 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>
	);
}

Gebruik van vertaal-ID's

Je kunt een id toevoegen aan de Translate component om verschillende vertalingen of betekenissen voor dezelfde tekst af te handelen. Dit is bijzonder nuttig wanneer dezelfde tekst verschillende vertalingen vereist, afhankelijk van de context. Door unieke IDs toe te wijzen, zorg je 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 header-login vertaald worden als “Iniciar sesión”, en de footer-login vertaald worden als “Acceder” in het Spaans.

Beste werkwijzen