Erweiterte Nutzung
Umgang mit Sprachen von rechts nach links
TacoTranslate erleichtert die Unterstützung von Sprachen mit Schreibrichtung von rechts nach links (RTL), wie Arabisch und Hebräisch, in Ihren React-Anwendungen. Die korrekte Handhabung von RTL-Sprachen stellt sicher, 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 isRightToLeftLocaleCode
Funktion 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 für bestimmte 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 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
Provider in Ihrer App zu verwenden. Dies ist nützlich, um Ihre Übersetzungen und Strings in verschiedene Ursprünge zu organisieren, wie zum Beispiel Ihren Header, Footer oder bestimmte Abschnitte.
Sie können hier mehr über die Nutzung von Origins lesen.
TacoTranslate
Anbieter übernehmen Einstellungen von einem übergeordneten Anbieter, 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>
);
}
Ursprung oder Gebietsschema überschreiben
Zusätzlich zur Verwendung mehrerer TacoTranslate
Provider können Sie auch sowohl Origin als auch Locale auf den Ebenen des Translate
Components 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 Laden der Übersetzungen je nach Verbindung des Nutzers einige Augenblicke dauern. Sie können einen Ladeindikator anzeigen, um das Benutzererlebnis 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 Pluralisierung 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 innerhalb derselben Anwendung zu unterstützen, können Sie mehrere TacoTranslate
Provider mit unterschiedlichen locale
Werten wie unten gezeigt verwenden:
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 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 unterschiedliche Übersetzungen benötigt. 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“ im Spanischen mit „Iniciar sesión“ und „footer login“ mit „Acceder“ übersetzt werden.