Dokumentácia: Pokročilé použitie

Pokročilé používanie

Slovak

Spracovanie jazykov s pravotoľavou orientáciou

TacoTranslate uľahčuje podporu jazykov so smerom sprava doľava (RTL), ako je arabčina a hebrejčina, vo vašich React aplikáciách. Správne ošetrenie jazykov s RTL zabezpečuje, že váš obsah bude správne zobrazený 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 vypnúť 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 termínov 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 slovo „TacoTranslate“ zostane v preklade nezmenené.

Viacero poskytovateľov TacoTranslate

Dôrazne odporúčame využívať viacerých TacoTranslate poskytovateľov vo vašej aplikácii. Toto je užitočné pre organizovanie vašich prekladov a reťazcov do rôznych zdrojov, ako je hlavička, pätička alebo konkrétne sekcie.

Môžete čítať viac o využívaní origins 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" />
		</>
	);
}

Správa načítavania

Pri zmene jazyka na strane klienta môže sťahovanie 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ú skúsenosť poskytnutím vizuálnej spätnej väzby počas prepínania.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Pluralizácia

Na správne zvládnutie plurálov a zobrazenie označení založených na počte v rôznych jazykoch sa toto 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 jednej 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 ID prekladov

Môžete pridať id ku komponentu Translate, aby ste mohli spracovať rôzne preklady alebo významy pre ten istý reťazec. Toto je obzvlášť užitočné, keď rovnaký text vyžaduje rôzne preklady na základe kontextu. Priradením jedinečných ID zabezpečíte, že každá inštancia reťazca bude preložená presne podľa svojho špecifického 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 ako „Acceder“ v španielčine.

Najlepšie postupy