TacoTranslate
/
DokumentáciaCenník
 
  1. Úvod
  2. Začíname
  3. Nastavenie a konfigurácia
  4. Používanie TacoTranslate
  5. Vykresľovanie na strane servera
  6. Pokročilé použitie
  7. Najlepšie postupy
  8. Riešenie chýb a ladenie
  9. Podporované jazyky

Pokročilé použitie

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

TacoTranslate uľahčuje podporu jazykov píšucich sa sprava doľava (RTL), ako sú arabčina a hebrejčina, vo vašich React aplikáciách. Správne spracovanie RTL jazykov zabezpečuje, že váš obsah sa zobrazuje 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 zistenie 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 konkrétnych častí reťazca alebo zabezpečiť, aby boli niektoré segmenty ponechané 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 TacoTranslate poskytovateľov vo vašej aplikácii. Je to užitočné na organizovanie vašich prekladov a reťazcov podľa rôznych pôvodov, napríklad hlavičky, pätičky alebo konkrétnych sekcií.

Viac informácií o využívaní originov nájdete tu.

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 jazykového nastavenia

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

Práca s načítavaním

Pri zmene jazyka na klientskej strane môže načítanie prekladov trvať niekoľko chvíľ v závislosti od pripojenia používateľa. Zobrazením indikátora načítania môžete vylepšiť používateľský zážitok a poskytnúť 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

Na zaobchádzanie s pluralizáciou a na správne zobrazovanie štítkov založených na počte v rôznych jazykoch sa to považuje 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 jednej aplikácii súčasne podporovať viacero jazykov, môžete použiť viacero 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 k komponentu Translate, aby ste zabezpečili rôzne preklady alebo významy pre ten istý text. To 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 textu 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í odkaz v hlavičke môže byť preložený ako “Iniciar sesión”, a prihlasovací odkaz v pätičke môže byť preložený ako “Acceder” v španielčine.

Najlepšie postupy

Produkt od NattskiftetVyrobené v Nórsku