Dokumentácia: Pokročilé použitie

Pokročilé použitie

Slovak

Práca s jazykmi píšícimi sa sprava doľava

TacoTranslate uľahčuje podporu jazykov s pravotoľavým (RTL) zobrazením, ako napríklad arabčiny a hebrejčiny, vo vašich React aplikáciách. Správne zaobchádzanie s RTL jazykmi zabezpečuje, že váš obsah je zobrazovaný 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';
	// ...
}

Vypnutie 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 iného obsahu, ktorý by nemal byť prekladaný.

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 využívať viacero poskytovateľov TacoTranslate vo vašej aplikácii. Je to užitočné pre organizovanie vašich prekladov a reťazcov do rôznych pôvodov, ako je váš hlavička, päta alebo konkrétne sekcie.

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

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

Prepísanie originu alebo lokality

Okrem použitia viacerých TacoTranslate poskytovateľov môžete tiež prepísať pôvod (origin) aj lokalizáciu (locale) 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 načítanie prekladov trvať niekoľko okamihov 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
	);
}

Pluralizácia

Aby ste správne zvládli množné číslo a zobrazovanie štítkov založených na počte v rôznych jazykoch, považuje sa to 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

Ak chcete v rámci rovnakej aplikácie súčasne podporovať viacero jazykov, 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 ID prekladov

Môžete pridať id ku komponentu Translate 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 podľa kontextu. Priradením unikátnych 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 „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