Documentatie: Geavanceerd gebruik

Geavanceerd gebruik

Dutch

Omgaan met talen die van rechts naar links worden geschreven

TacoTranslate maakt het eenvoudig om talen van rechts naar links (RTL), zoals Arabisch en Hebreeuws, te ondersteunen in uw React-toepassingen. Een correcte behandeling 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 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 string uit te schakelen of om ervoor te zorgen dat bepaalde segmenten onveranderd blijven, kunt u driedubbele vierkante haken gebruiken. Deze functie is nuttig 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” onveranderd in de vertaling.

Meerdere TacoTranslate-providers

We moedigen sterk aan om meerdere TacoTranslate providers in je app te gebruiken. Dit is handig om je vertalingen en tekstfragmenten te organiseren in verschillende origins, zoals je header, footer of specifieke secties.

U kunt hier meer lezen over het gebruik van origins.

TacoTranslate providers erven instellingen over van elke 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 locatie

Naast het gebruik van meerdere TacoTranslate providers, kunt u ook zowel origin als locale overschrijven op het niveau van de Translate component en 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" />
		</>
	);
}

Behandeling van laden

Bij het wijzigen van talen aan de clientzijde kan het ophalen van vertalingen enkele momenten duren, afhankelijk van de verbinding van de gebruiker. U kunt een laadindicator weergeven om de gebruikerservaring te verbeteren door visuele feedback te geven tijdens de wisseling.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Meervoudsvorming

Om meervoudsvorming te verwerken en teller-gebaseerde labels correct weer te geven in verschillende talen, 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 gelijktijdig binnen dezelfde applicatie te ondersteunen, kunt u meerdere TacoTranslate-providers gebruiken met verschillende locale waarden zoals hieronder weergegeven:

U kunt ook de locale op het component- of hook-niveau 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 te behandelen. Dit is vooral handig wanneer dezelfde tekst verschillende vertalingen vereist afhankelijk van de context. Door unieke ID's 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, header login kan vertaald worden naar “Iniciar sesión”, en footer login kan vertaald worden naar “Acceder” in het Spaans.

Beste praktijken