Erweiterte Verwendung
Umgang mit Sprachen, die von rechts nach links geschrieben werden
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 stellt sicher, dass Ihre Inhalte für Nutzer, die von rechts nach links lesen, korrekt 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';
// ...
}
Ü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. Das ist nützlich, um Ihre Übersetzungen und Strings in verschiedene Origins zu organisieren, etwa für die Kopfzeile, die Fußzeile oder bestimmte Abschnitte.
Sie können hier mehr über die Nutzung von Origins lesen.
TacoTranslate
Provider erben 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
Provider können Sie auf Komponenten- und Hook-Ebene sowohl origin als auch locale für Translate
und useTranslation
überschreiben.
import {Translate, useTranslation} from 'tacotranslate/react';
function Greeting() {
const spanishHello = useTranslation('Hello!', {locale: 'es'});
return (
<>
{spanishHello}
<Translate string="What’s up?" origin="greeting" />
</>
);
}
Ladezustände behandeln
Beim Wechsel der Sprache auf der Client-Seite kann das Abrufen der Übersetzungen je nach Verbindung des Nutzers einige Augenblicke dauern. Sie können einen Ladeindikator anzeigen, um das Nutzererlebnis 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 Pluralformen zu behandeln 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 der Translate
Komponente ein id
hinzufügen, um unterschiedliche Übersetzungen oder Bedeutungen für denselben String zu handhaben. Das ist besonders nützlich, wenn derselbe Text je nach Kontext unterschiedliche Übersetzungen erfordert. Durch die Vergabe eindeutiger IDs 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 Header-Login mit „Iniciar sesión“ und der Footer-Login mit „Acceder“ ins Spanische übersetzt werden.