Dokumentácia: Pokročilé použitie

Pokročilé použitie

Slovak

Spracovanie jazykov, ktoré sa čítajú sprava doľava

TacoTranslate uľahčuje podporu jazykov s pravotoľavým zápisom (RTL), ako sú arabčina a hebrejčina, vo vašich React aplikáciách. Správne spracovanie jazykov RTL zabezpečuje, že váš obsah bude správne zobrazený pre používateľov, ktorí čítajú spreava doľava.

import {useTacoTranslate} from 'tacotranslate/react';

function Document() {
	const {locale, isRightToLeft} = useTacoTranslate();

	return (
		<html lang={locale} dir={isRightToLeft ? 'rtl' : 'ltr'}>
			<body>
				// ...
			</body>
		</html>
	);
}

Môžete tiež použiť poskytnutú funkciu isRightToLeftLocaleCode na overenie aktuálneho jazyka mimo React.

import {isRightToLeftLocaleCode} from 'tacotranslate';

function foo(locale = 'es') {
	const direction = isRightToLeftLocaleCode(locale) ? 'rtl' : 'ltr';
	// ...
}

Zakázanie prekladu

Ak chcete zakázať preklad pre konkrétne časti reťazca alebo zabezpečiť, aby určité segmenty zostali nezmenené, môžete použiť trojité hranaté zátvorky. Táto funkcia je užitočná na zachovanie pôvodného formátu mien, technických výrazov alebo akéhokoľvek iného obsahu, ktorý by sa nemal prekladať.

import {Translate} from 'tacotranslate/react';

function Component() {
	return (
		<Translate string="Hello, [[[TacoTranslate]]]!" />
	);
}

V tomto príklade slovo “TacoTranslate” zostane v preklade nezmenené.

Viacero poskytovateľov TacoTranslate

Dôrazne odporúčame využívať viacero TacoTranslate poskytovateľov vo vašej aplikácii. Je to užitočné na organizovanie vašich prekladov a reťazcov do rôznych pôvodov, ako je vaša hlavička, pätička alebo špecifické sekcie.

Môžete čítať viac o využívaní origins tu.

Poskytovatelia TacoTranslate dedia nastavenia od akéhokoľvek nadradeného poskytovateľa, takže nebudete musieť opakovať žiadne ďalšie nastavenia.

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>
	);
}

Prepísanie pôvodu alebo lokality

Okrem používania viacerých TacoTranslate poskytovateľov môžete tiež prepísať pôvod a lokalitu na úrovniach komponentu 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" />
		</>
	);
}

Spracovanie načítavania

Pri zmene jazyka na strane klienta môže trvať niekoľko okamihov, kým sa načítajú preklady v závislosti od pripojenia používateľa. Môžete zobraziť indikátor načítavania, aby ste zlepšili používateľský zážitok a poskytli vizuálnu spätnú väzbu počas prepínania.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Množné číslo

Na správne spracovanie množného čísla a zobrazenie štítkov založených na počte v rôznych jazykoch sa to považuje za najlepšiu prax:

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)}}
		/>
	);
}

Viacero jazykov

Na podporu viacerých jazykov súčasne v rámci rovnakej aplikácie môžete použiť viacerých poskytovateľov TacoTranslate s rôznymi hodnotami locale ako je uvedené nižšie:

Môžete tiež prepísať locale na úrovni komponentu alebo 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žívanie identifikátorov prekladov

Môžete pridať id ku komponentu Translate na spracovanie rôznych prekladov alebo významov pre ten istý reťazec. To je obzvlášť užitočné, keď ten istý text vyžaduje rôzne preklady založené na kontexte. Pridelením jedinečných ID zabezpečíte, že každá inštancia reťazca bude preložená presne podľa svojho konkrétneho významu.

import {Translate} from 'tacotranslate/react';

function Header() {
	return (
		<Translate id="header" string="Login" />
	);
}

function Footer() {
	return (
		<Translate id="footer" string="Login" />
	);
}

Napríklad, prihlasovanie v hlavičke môže byť preložené ako „Iniciar sesión“ a prihlasovanie v pätičke môže byť preložené ako „Acceder“ v španielčine.

Najlepšie postupy