Pokročilé použití
Zpracování jazyků psaných zprava doleva
TacoTranslate usnadňuje podporu jazyků psaný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 je 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 poskytovanou funkci isRightToLeftLocaleCode
ke kontrole aktuálního jazyka mimo React.
import {isRightToLeftLocaleCode} from 'tacotranslate';
function foo(locale = 'es') {
const direction = isRightToLeftLocaleCode(locale) ? 'rtl' : 'ltr';
// ...
}
Zakázání překladu
Chcete-li zakázat překlad pro konkrétní části textu nebo zajistit, aby určité segmenty zůstaly nezměně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 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ěno.
Více poskytovatelů TacoTranslate
Důrazně doporučujeme používat ve vaší aplikaci několik TacoTranslate
providerů. To je užitečné pro organizaci vašich překladů a řetězců do různých originů, jako je hlavička, patička nebo konkrétní sekce.
Můžete si přečíst více o využívání původů zde.
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 lokality
Kromě používání více poskytovatelů TacoTranslate
můžete také přepsat původ i lokalizaci na úrovni 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" />
</>
);
}
Zpracování načítání
Při změně jazyka na straně klienta může načítání překladů trvat několik okamžiků v závislosti na připojení uživatele. Můžete zobrazit indikátor načítání, který zlepší uživatelský zážitek tím, že při přepínání poskytne vizuální zpětnou vazbu.
import {useTacoTranslate} from 'tacotranslate/react';
function Component() {
const {isLoading} = useTacoTranslate();
return (
isLoading ? 'Translations are loading...' : null
);
}
Číslování
Pro správné zvládnutí plurálu a zobrazování štítků založených na počtu v různých jazycích se považuje tento postup za nejlepší 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ů
Pro podporu více jazyků současně v rámci jedné aplikace můžete použít více poskytovatelů TacoTranslate
s různými hodnotami locale
, 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 textu. To je zvláště užitečné, když ten samý text vyžaduje různé překlady podle kontextu. Přiřazením unikátních ID zajistíte, že každá instance textu 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 jako „Acceder“ ve španělštině.