Dokumentácia: Pokročilé použitie

Pokročilé použitie

Slovak

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

TacoTranslate uľahčuje podporu jazykov písaný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 sa váš obsah 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 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á 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 používať viacero poskytovateľov TacoTranslate vo vašej aplikácii. Pomáha to organizovať vaše preklady a reťazce podľa rôznych originov, napríklad hlavičky, päty alebo konkrétnych sekcií.

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

TacoTranslate poskytovatelia zdedia nastavenia od aké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 lokality

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čítavaním

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ť načítací indikátor, 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 sa v rôznych jazykoch správne riešila pluralizácia a zobrazovali štítky závislé od počtu, považuje sa za osvedčený postup toto:

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

Aby ste zároveň podporili 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

Môžete pridať id do komponentu Translate na riešenie 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 v závislosti od kontextu. Priradením jedinečných 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 prihlasovací text v hlavičke sa môže preložiť ako “Iniciar sesión” a prihlasovací text v pätičke sa môže preložiť ako “Acceder” po španielsky.

Najlepšie postupy