Dokumentace: Pokročilé použití

Pokročilé použití

Czech

Zpracování jazyků psaných zprava doleva

TacoTranslate usnadňuje podporu jazyků se směrem psaní zprava doleva (RTL), jako jsou arabština a hebrejština, ve vašich React aplikacích. Správné zpracování jazyků RTL 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';
	// ...
}

Zakázání překladu

Chcete-li zakázat překlad pro konkrétní části řetězce nebo zajistit, aby určité segmenty zůstaly 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 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 využívat více poskytovatelů TacoTranslate ve vaší aplikaci. To je užitečné pro organizaci vašich překladů a řetězců do různých zdrojů, například do vašeho záhlaví, zápatí nebo konkrétních sekcí.

Můžete zde přečíst více o využívání origins.

TacoTranslate poskytovatelé dědí nastavení od jakéhokoli nadřazeného poskytovatele, takže nemusíte 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í originu nebo locale

Kromě používání více poskytovatelů TacoTranslate můžete také přepsat jak zdroj (origin), tak i lokalizaci (locale) 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" />
		</>
	);
}

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í, aby byla uživatelská zkušenost lepší díky vizuální zpětné vazbě během přepínání.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Rod mužského rodu

Pro správné zpracování množného čísla a zobrazení popisků založených na počtu v různých jazycích se to považuje za nejlepší postup:

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 jedné aplikaci 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žití ID překladů

Můžete přidat id ke komponentě Translate pro zpracování různých překladů nebo významů téže fráze. To je zvláště užitečné, když stejný text vyžaduje odlišné překlady v závislosti na kontextu. Přiřazením unikátních ID zajistíte, že každá instance fráze 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 v hlavičce může být přihlašování přeloženo jako „Iniciar sesión“ a v patičce jako „Acceder“ ve španělštině.

Nejlepší postupy