Dokumentácia: Pokročilé použitie

Pokročilé používanie

Slovak

Práca s jazykmi písanými sprava doľava

TacoTranslate uľahčuje podporu jazykov, ktoré sa píšu 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 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 prostredia React.

import {isRightToLeftLocaleCode} from 'tacotranslate';

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

Vypnutie prekladu

Aby ste zabránili prekladu 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 výrazov alebo akejkoľvek inej časti obsahu, ktorá by sa nemala 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ť viacero TacoTranslate poskytovateľov vo vašej aplikácii. To je užitočné pri organizovaní 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 prečítať viac o využívaní originov.

TacoTranslate poskytovatelia dedia 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 nastavenia

Okrem použitia viacerých poskytovateľov TacoTranslate 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" />
		</>
	);
}

Správa načítavania

Pri zmene jazyka na strane klienta môže načítanie prekladov trvať niekoľko chvíľ v závislosti od pripojenia používateľa. Môžete zobraziť indikátor načítania, 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

Za najlepšiu prax pri správnom zaobchádzaní s plurálmi a pri zobrazovaní štítkov založených na počte v rôznych jazykoch sa považuje:

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 súčasne podporovať viacero jazykov v tej istej aplikácii, 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

Do komponentu Translate môžete pridať id, aby ste riešili rôzne preklady alebo významy toho istého reťazca. Toto je obzvlášť užitočné, keď ten istý text vyžaduje rôzne 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 do španielčiny preložiť ako „Iniciar sesión“ a prihlásenie v pätičke ako „Acceder“.

Odporúčané postupy