Pokročilé použití
Zpracování jazyků psaných zprava doleva
TacoTranslate usnadňuje podporu jazyků zapisovaných zprava doleva (RTL), jako jsou arabština a hebrejština, ve vašich React aplikacích. Správné zpracování RTL jazyků zajišťuje, že váš obsah bude správně zobrazen uživatelům, kteří čtou zprava doleva.
import {useTacoTranslate} from 'tacotranslate/react';
function Document() {
const {locale, isRightToLeft} = useTacoTranslate();
return (
<html lang={locale} dir={isRightToLeft ? 'rtl' : 'ltr'}>
<body>
// ...
</body>
</html>
);
}
Můžete také použít poskytnutou funkci isRightToLeftLocaleCode
k ověření aktuálního jazyka mimo React.
import {isRightToLeftLocaleCode} from 'tacotranslate';
function foo(locale = 'es') {
const direction = isRightToLeftLocaleCode(locale) ? 'rtl' : 'ltr';
// ...
}
Vypnutí překladu
Chcete-li zakázat překlad určitých částí řetězce nebo zajistit, aby byly některé segmenty ponechány beze změny, můžete použít trojité hranaté závorky. Tato funkce je užitečná pro zachování původního formátu jmen, technických termínů nebo jakéhokoli jiného obsahu, který by neměl být překládán.
import {Translate} from 'tacotranslate/react';
function Component() {
return (
<Translate string="Hello, [[[TacoTranslate]]]!" />
);
}
V tomto příkladu zůstane slovo „TacoTranslate“ v překladu nezměněné.
Více poskytovatelů TacoTranslate
Důrazně doporučujeme používat v aplikaci více poskytovatelů TacoTranslate
. To je užitečné pro uspořádání vašich překladů a textů do různých původů, například hlavičky, patičky nebo konkrétních sekcí.
Můžete zde si přečíst více o využívání originů.
Poskytovatelé TacoTranslate
dědí nastavení od jakéhokoli nadřazeného poskytovatele, takže nebudete muset opakovat žádná další nastavení.
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>
);
}
Přepsání původu nebo locale
Kromě používání více poskytovatelů TacoTranslate
můžete také přepsat jak origin, tak lokalitu na úrovních komponenty Translate
a hooku useTranslation
.
import {Translate, useTranslation} from 'tacotranslate/react';
function Greeting() {
const spanishHello = useTranslation('Hello!', {locale: 'es'});
return (
<>
{spanishHello}
<Translate string="What’s up?" origin="greeting" />
</>
);
}
Práce s načítáním
Při změně jazyka na straně klienta může načítání překladů chvíli trvat v závislosti na připojení uživatele. Můžete zobrazit indikátor načítání, čímž během přepínání poskytnete uživateli vizuální zpětnou vazbu a zlepšíte tak uživatelský zážitek.
import {useTacoTranslate} from 'tacotranslate/react';
function Component() {
const {isLoading} = useTacoTranslate();
return (
isLoading ? 'Translations are loading...' : null
);
}
Pluralizace
Pro správné řešení pluralizace a zobrazení štítků založených na počtu v různých jazycích se to považuje za osvědčenou praxi:
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)}}
/>
);
}
Více jazyků
Chcete-li v téže aplikaci současně podporovat více jazyků, můžete použít více poskytovatelů TacoTranslate s různými locale
hodnotami, jak je uvedeno níže:
Můžete také přepsat locale
na úrovni komponenty nebo hooku.
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>
);
}
Používání ID překladů
Můžete přidat id
ke komponentě Translate
, abyste zpracovali různé překlady nebo významy stejného řetězce. To je obzvlášť užitečné, když stejný text vyžaduje různé překlady v závislosti na kontextu. Přiřazením jedinečných ID zajistíte, že každá instance řetězce bude přeložena přesně podle svého konkrétního významu.
import {Translate} from 'tacotranslate/react';
function Header() {
return (
<Translate id="header" string="Login" />
);
}
function Footer() {
return (
<Translate id="footer" string="Login" />
);
}
Například přihlášení v hlavičce může být přeloženo jako “Iniciar sesión” a přihlášení v patičce může být přeloženo jako “Acceder” ve španělštině.