Dokumentácia: Pokročilé použitie

Pokročilé použitie

Slovak

Spracovanie jazykov zo západu na východ

TacoTranslate uľahčuje podporu jazykov so smerom textu sprava doľava (RTL), ako je arabčina a hebrejčina, vo vašich React aplikáciách. Správne spracovanie RTL jazykov zabezpečuje, že váš obsah je zobrazený správne pre používateľov, ktorí čítajú sprava 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 kontrolu 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 určité časti reťazca alebo zabezpečiť, aby niektoré 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 nemal byť preložený.

import {Translate} from 'tacotranslate/react';

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

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

Viacero poskytovateľov TacoTranslate

Dôrazne odporúčame používať v aplikácii viacerých poskytovateľov TacoTranslate. Je to užitočné na organizovanie vašich prekladov a reťazcov do rôznych pôvodov, napríklad do hlavičky, päty alebo konkrétnych sekcií.

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

Poskytovatelia TacoTranslate dedia nastavenia od akéhokoľvek nadradeného poskytovateľa, takže nemusíte 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>
	);
}

Prepisovanie pôvodu alebo lokality

Okrem používania viacerých TacoTranslate poskytovateľov môžete tiež prepísať pôvod (origin) a lokalitu (locale) na úrovni 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 načítanie prekladov trvať niekoľko okamihov v závislosti od pripojenia používateľa. Môžete zobraziť indikátor načítania, aby ste zlepšili používateľský zážitok poskytnutím vizuálnej odozvy počas prepínania.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Číslovanie množného čísla

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

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 súčasnú podporu viacerých jazykov v rámci jednej aplikácie môžete použiť viacero 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 translation IDs

Môžete pridať id ku Translate komponentu na spracovanie rôznych prekladov alebo významov pre ten istý reťazec. Toto je obzvlášť užitočné, keď ten istý text vyžaduje rôzne preklady na základe kontextu. Pridelením unikátnych ID zabezpečíte, že každá inštancia reťazca bude preložená presne podľa jej 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, header login sa môže preložiť ako „Iniciar sesión“ a footer login sa môže preložiť ako „Acceder“ v španielčine.

Najlepšie postupy