Dokumentace: Pokročilé použití

Pokročilé použití

Czech

Zpracování jazyků zprava doleva

TacoTranslate usnadňuje podporu jazyků psaných zprava doleva (RTL), jako je arabština a hebrejština, ve vašich aplikacích React. Správné zacházení s jazyky RTL zajišťuje, že váš obsah je správně zobrazován 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>
	);
}

Také můžete použít poskytnutou 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 určité části řetězce nebo zajistit, aby některé segmenty zůstaly zachová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 slovo „TacoTranslate“ zůstane v překladu nezměněno.

Více poskytovatelů TacoTranslate

Důrazně doporučujeme používat více TacoTranslate providerů ve vaší aplikaci. To je užitečné pro organizaci vašich překladů a řetězců do různých originů, jako je hlavička, zápatí nebo specifické sekce.

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

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řepisování původu nebo lokality

Kromě použití více poskytovatelů TacoTranslate můžete také přepsat jak origin, tak locale 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 klientské straně může načítání překladů chvíli trvat v závislosti na připojení uživatele. Můžete zobrazit ukazatel načítání, abyste zlepšili uživatelský zážitek tím, že během přepínání poskytnete vizuální zpětnou vazbu.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Množné číslo

Pro správné zvládnutí množného čísla a zobrazení štítků založených na počtu v různých jazycích je považováno 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í překladových ID

K Translate komponentě můžete přidat id, abyste zpracovali různé překlady nebo významy pro stejný řetězec. To je zvláště užitečné, když stejný text vyžaduje různé překlady podle kontextu. Přiřazením unikátních ID zajistíte, že každá instance řetězce bude přeložena přesně podle svého specifické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 hlavičkové přihlášení by se mohlo přeložit jako „Iniciar sesión“ a patičkové přihlášení jako „Acceder“ ve španělštině.

Nejlepší postupy