Dokumentation: Erweiterte Nutzung

Erweiterte Nutzung

German

Umgang mit rechts-nach-links-Sprachen

TacoTranslate erleichtert die Unterstützung von Sprachen mit Schreibrichtung von rechts nach links (RTL), wie Arabisch und Hebräisch, in Ihren React-Anwendungen. Eine korrekte Handhabung von RTL‑Sprachen sorgt dafür, dass Ihre Inhalte für Benutzer, die von rechts nach links lesen, korrekt dargestellt werden.

import {useTacoTranslate} from 'tacotranslate/react';

function Document() {
	const {locale, isRightToLeft} = useTacoTranslate();

	return (
		<html lang={locale} dir={isRightToLeft ? 'rtl' : 'ltr'}>
			<body>
				// ...
			</body>
		</html>
	);
}

Sie können auch die bereitgestellte isRightToLeftLocaleCode Funktion verwenden, um die aktuelle Sprache außerhalb von React zu prüfen.

import {isRightToLeftLocaleCode} from 'tacotranslate';

function foo(locale = 'es') {
	const direction = isRightToLeftLocaleCode(locale) ? 'rtl' : 'ltr';
	// ...
}

Übersetzung deaktivieren

Um die Übersetzung bestimmter Teile eines Strings zu deaktivieren oder sicherzustellen, dass bestimmte Segmente unverändert bleiben, können Sie dreifache eckige Klammern verwenden. Diese Funktion ist nützlich, um das ursprüngliche Format von Namen, Fachbegriffen oder anderen Inhalten beizubehalten, die nicht übersetzt werden sollen.

import {Translate} from 'tacotranslate/react';

function Component() {
	return (
		<Translate string="Hello, [[[TacoTranslate]]]!" />
	);
}

In diesem Beispiel bleibt das Wort „TacoTranslate“ in der Übersetzung unverändert.

Mehrere TacoTranslate-Anbieter

Wir empfehlen dringend, mehrere TacoTranslate Provider in Ihrer App zu verwenden. Dies ist nützlich, um Ihre Übersetzungen und Zeichenketten in verschiedene Ursprünge zu organisieren, z. B. Ihre Kopfzeile, Fußzeile oder bestimmte Abschnitte.

Sie können hier mehr darüber erfahren, wie Origins verwendet werden.

TacoTranslate Provider übernehmen Einstellungen von jedem übergeordneten Provider, sodass Sie keine weiteren Einstellungen wiederholen müssen.

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 oder Gebietsschema überschreiben

Zusätzlich zur Verwendung mehrerer TacoTranslate Anbieter können Sie sowohl Origin als auch Locale auf der Ebene der Translate‑Komponente und des useTranslation‑Hooks überschreiben.

import {Translate, useTranslation} from 'tacotranslate/react';

function Greeting() {
	const spanishHello = useTranslation('Hello!', {locale: 'es'});

	return (
		<>
			{spanishHello}
			<Translate string="What’s up?" origin="greeting" />
		</>
	);
}

Umgang mit dem Laden

Beim Wechsel der Sprache auf der Client-Seite kann das Abrufen der Übersetzungen je nach Verbindung des Benutzers einige Augenblicke dauern. Sie können einen Ladeindikator anzeigen, um das Benutzererlebnis zu verbessern, indem Sie während des Wechsels visuelles Feedback bereitstellen.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Pluralisierung

Um Pluralformen zu handhaben und anzahlabhängige Beschriftungen in verschiedenen Sprachen korrekt darzustellen, gilt dies als bewährte Praxis:

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

Mehrere Sprachen

Um mehrere Sprachen gleichzeitig in derselben Anwendung zu unterstützen, können Sie mehrere TacoTranslate-Provider mit unterschiedlichen locale Werten wie unten gezeigt verwenden:

Sie können das locale auch auf Komponenten- oder Hook-Ebene überschreiben.

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

Verwendung von Übersetzungs‑IDs

Sie können ein id zur Translate Komponente hinzufügen, um unterschiedliche Übersetzungen oder Bedeutungen derselben Zeichenfolge zu behandeln. Das ist besonders nützlich, wenn derselbe Text je nach Kontext unterschiedlich übersetzt werden muss. Durch die Vergabe eindeutiger IDs stellen Sie sicher, dass jede Instanz der Zeichenfolge entsprechend ihrer jeweiligen Bedeutung korrekt übersetzt wird.

import {Translate} from 'tacotranslate/react';

function Header() {
	return (
		<Translate id="header" string="Login" />
	);
}

function Footer() {
	return (
		<Translate id="footer" string="Login" />
	);
}

Zum Beispiel könnte 'Login im Header' zu 'Iniciar sesión' und 'Login im Footer' zu 'Acceder' auf Spanisch übersetzt werden.

Bewährte Verfahren