Dokumentation: Erweiterte Nutzung

Erweiterte Nutzung

German

Umgang mit rechts-nach-links-Sprachen

TacoTranslate erleichtert die Unterstützung von rechts-nach-links (RTL)-Sprachen 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, richtig 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 Funktion isRightToLeftLocaleCode verwenden, um die aktuelle Sprache außerhalb von React zu überprü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-Provider

Wir empfehlen nachdrücklich, mehrere TacoTranslate Provider in Ihrer App zu verwenden. Dies ist hilfreich, um Ihre Übersetzungen und Strings in verschiedene Bereiche zu organisieren, z. B. Ihre Kopfzeile, Fußzeile oder bestimmte Abschnitte.

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

TacoTranslate Provider erben Einstellungen von jedem übergeordneten Provider, sodass Sie keine anderen 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>
	);
}

Überschreiben von Ursprung oder Gebietsschema

Zusätzlich zur Verwendung mehrerer TacoTranslate Provider können Sie auch Ursprung und Gebietsschema sowohl auf der Ebene der Translate Komponente als auch 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 Ladezuständen

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

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Pluralisierung

Um die Pluralbildung zu handhaben und zählbasierte Bezeichnungen in verschiedenen Sprachen korrekt anzuzeigen, gilt dies als beste Vorgehensweise:

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 verwenden, mit unterschiedlichen locale Werten, wie unten gezeigt:

Sie können auch das locale 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 der Translate Komponente ein id hinzufügen, um unterschiedliche Übersetzungen oder Bedeutungen für denselben String zu behandeln. Das ist besonders nützlich, wenn derselbe Text je nach Kontext unterschiedliche Übersetzungen benötigt. Indem Sie eindeutige IDs zuweisen, stellen Sie sicher, dass jede Instanz des Strings entsprechend ihrer spezifischen 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 der Login im Header auf Spanisch „Iniciar sesión“ und der Login im Footer „Acceder“ heißen.

Bewährte Verfahren