Dokumentace: Pokročilé použití

Pokročilé použití

Czech

Práce s jazyky zapisovanými zprava doleva

TacoTranslate usnadňuje podporu jazyků se zápisem zprava doleva (RTL), jako jsou arabština a hebrejština, ve vašich aplikacích React. Správné zpracování jazyků RTL 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 poskytnutou funkci isRightToLeftLocaleCode k ověření aktuálního jazyka mimo rámec 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 určitých částí textu nebo zajistit, aby některé 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 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ěno.

Více poskytovatelů TacoTranslate

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

Více o využívání původů si můžete přečíst zde.

Poskytovatelé TacoTranslate 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řepisování originálu nebo locale

Kromě použití více poskytovatelů TacoTranslate můžete také přepsat jak origin, tak lokalizaci 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í, abyste zlepšili uživatelský zážitek tím, že poskytnete vizuální zpětnou vazbu během přepínání.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Pluralizace

Pro správné zpracování množného čísla a zobrazení štítků založených na počtu v různých jazycích se toto považuje 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 současnou podporu více jazyků 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žívání ID překladu

Můžete přidat id ke komponentě Translate, abyste zvládli 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 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ě.

Nejlepší postupy