Dokumentation: Erweiterte Nutzung

Erweiterte Nutzung

German

Umgang mit Sprachen von rechts nach links

TacoTranslate macht es einfach, rechts-nach-links (RTL) Sprachen wie Arabisch und Hebräisch in Ihren React-Anwendungen zu unterstützen. Die korrekte Handhabung von RTL-Sprachen stellt sicher, dass Ihre Inhalte für Benutzer, die von rechts nach links lesen, richtig angezeigt 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';
	// ...
}

Deaktivieren der Übersetzung

Um die Übersetzung bestimmter Teile eines Strings zu deaktivieren oder um sicherzustellen, dass bestimmte Abschnitte unverändert bleiben, können Sie dreifache eckige Klammern verwenden. Diese Funktion ist nützlich, um das Originalformat 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 Anbieter in Ihrer App zu verwenden. Dies ist nützlich, um Ihre Übersetzungen und Strings in verschiedene Ursprünge zu organisieren, wie z. B. Ihren Header, Footer oder bestimmte Abschnitte.

Sie können hier mehr über die Verwendung von Origins lesen.

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 Origin oder Locale

Zusätzlich zur Verwendung mehrerer TacoTranslate Provider können Sie sowohl die Herkunft als auch die Sprachebenen 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 Wechseln der Sprache auf der Client-Seite kann das Abrufen der Übersetzungen je nach Verbindung des Benutzers einige Momente dauern. Sie können einen Ladeindikator anzeigen, um die Benutzererfahrung zu verbessern, indem Sie während des Wechsels visuelles Feedback bieten.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Pluralisierung

Um die Pluralisierung zu handhaben und zählbasierte Bezeichnungen in verschiedenen Sprachen korrekt anzuzeigen, 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 auch die 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 eine id zum Translate Komponent hinzufügen, um unterschiedliche Übersetzungen oder Bedeutungen für denselben Textstring zu verwalten. Dies ist besonders nützlich, wenn derselbe Text je nach Kontext verschiedene Übersetzungen erfordert. Durch die Vergabe eindeutiger IDs stellen Sie sicher, dass jede Instanz des Textes genau entsprechend ihrer spezifischen Bedeutung ü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 „header login“ mit „Iniciar sesión“ und „footer login“ mit „Acceder“ auf Spanisch übersetzt werden.

Beste Vorgehensweisen