Dokumentace: Pokročilé použití

Pokročilé použití

Czech

Práce s jazyky čtenými zprava doleva

TacoTranslate usnadňuje podporu jazyků se zápisem zprava doleva (RTL), jako je arabština a hebrejština, ve vašich React aplikacích. Správné zacházení s RTL jazyky zajišťuje, že se váš obsah zobrazí správně uživatelům, kteří čtou zprava doleva.

import {useTacoTranslate} from 'tacotranslate/react';

function Document() {
	const {locale, isRightToLeft} = useTacoTranslate();

	return (
		<html lang={locale} dir={isRightToLeft ? 'rtl' : 'ltr'}>
			<body>
				// ...
			</body>
		</html>
	);
}

Můžete také použít poskytnutou funkci isRightToLeftLocaleCode k ověření aktuálního jazyka mimo React.

import {isRightToLeftLocaleCode} from 'tacotranslate';

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

Vypnutí překladu

Chcete-li zakázat překlad konkrétních částí řetězce nebo zajistit, aby určité úseky zůstaly beze změny, můžete použít trojité hranaté závorky. Tato funkce je užitečná pro zachování původního formátu jmen, technických termínů nebo jiného obsahu, který by neměl být překládán.

import {Translate} from 'tacotranslate/react';

function Component() {
	return (
		<Translate string="Hello, [[[TacoTranslate]]]!" />
	);
}

V tomto příkladu zůstane slovo “TacoTranslate” v překladu beze změny.

Více poskytovatelů TacoTranslate

Důrazně doporučujeme využívat více TacoTranslate poskytovatelů ve vaší aplikaci. To je užitečné pro organizaci vašich překladů a řetězců do různých originů, například do záhlaví, zápatí nebo konkrétních sekcí.

Můžete zde si přečíst více o využívání originů.

TacoTranslate poskytovatelé dědí nastavení od jakéhokoli nadřazeného poskytovatele, takže nebudete muset opakovat žádná další nastavení.

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

Přepsání originu nebo lokality

Kromě použití více TacoTranslate poskytovatelů můžete také přepsat jak původ, tak lokalitu na úrovni komponenty 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áce s načítáním

Při změně jazyka na klientské straně může načítání překladů v závislosti na připojení uživatele trvat několik okamžiků. Pro zlepšení uživatelského zážitku můžete během přepínání zobrazit indikátor načítání, který poskytne vizuální zpětnou vazbu.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Pluralizace

Správné řešení pluralizace a správné zobrazování štítků podle počtu v různých jazycích se považuje za nejlepší praxi:

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

Více jazyků

Aby aplikace současně podporovala více jazyků, můžete použít více poskytovatelů TacoTranslate s různými hodnotami locale, jak je ukázáno níže:

Můžete také přepsat locale na úrovni komponenty nebo 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žití překladových ID

Můžete přidat id ke komponentě Translate pro zpracování různých překladů nebo významů stejného řetězce. To je obzvlášť užitečné, když stejný text vyžaduje různé překlady v závislosti na kontextu. Při přiřazení jedinečných ID zajistíte, že každá instance řetězce bude přeložena přesně podle svého konkrétního významu.

import {Translate} from 'tacotranslate/react';

function Header() {
	return (
		<Translate id="header" string="Login" />
	);
}

function Footer() {
	return (
		<Translate id="footer" string="Login" />
	);
}

Například se může přihlášení v hlavičce přeložit jako “Iniciar sesión” a přihlášení v patičce jako “Acceder” ve španělštině.

Doporučené postupy