Dokumentácia: Pokročilé používanie

Pokročilé použitie

Slovak

Podpora jazykov píšaných sprava doľava

TacoTranslate uľahčuje podporu jazykov píšaných sprava doľava (RTL), ako sú arabčina a hebrejčina, vo vašich React aplikáciách. Správne zaobchádzanie s RTL jazykmi zabezpečuje, že váš obsah sa zobrazí správne používateľom, 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 zistenie aktuálneho jazyka mimo React.

import {isRightToLeftLocaleCode} from 'tacotranslate';

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

Vypnutie prekladu

Aby ste vypli preklad konkrétnych častí reťazca alebo zabezpečili, že určité úseky zostanú nezmenené, môžete použiť trojité hranaté zátvorky. Táto funkcia je užitočná pri zachovaní pôvodného formátu mien, technických termínov 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 zostane slovo “TacoTranslate” v preklade nezmenené.

Viacerí poskytovatelia TacoTranslate

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

Môžete tu nájsť viac informácií o využívaní origins.

Poskytovatelia TacoTranslate zdedia nastavenia od ktoré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 jazykového prostredia

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

Práca s načítaním

Pri zmene jazyka na klientskej strane môže získavanie prekladov v závislosti od pripojenia používateľa chvíľu trvať. Môžete zobraziť indikátor načítavania, čím zlepšíte používateľský zážitok 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

Aby sa pluralizácia a zobrazovanie štítkov založených na počte v rôznych jazykoch riešili správne, považuje sa toto za najlepší postup:

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

Viaceré jazyky

Ak chcete v tej istej aplikácii súčasne podporovať viaceré jazyky, môžete použiť viacero poskytovateľov TacoTranslate s rôznymi locale hodnotami, 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 do komponentu Translate na zaobchádzanie s rôznymi prekladmi alebo význammi toho istého reťazca. To je obzvlášť užitočné, keď rovnaký text vyžaduje odlišné preklady v závislosti od kontextu. Priradením jedinečných ID zabezpečíte, že každý výskyt reťazca bude preložený presne podľa jeho 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 prihlásenie v hlavičke sa môže preložiť ako “Iniciar sesión” a prihlásenie v pätičke sa môže preložiť ako “Acceder” v španielčine.

Najlepšie postupy