Dokumentace: Pokročilé použití

Pokročilé použití

Czech

Zpracování jazyků psaných zprava doleva

TacoTranslate usnadňuje podporu jazyků čtených zprava doleva (RTL), jako jsou arabština a hebrejština, ve vašich React aplikacích. Správné zpracování RTL jazyků zajišťuje, že váš obsah bude zobrazen 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 ke zjištění aktuálního jazyka mimo React.

import {isRightToLeftLocaleCode} from 'tacotranslate';

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

Vypnutí překladu

Abyste zakázali překlad konkrétních částí řetězce nebo zajistili, aby byly určité segmenty ponechány 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, odborných termínů nebo jakéhokoli 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 slovo „TacoTranslate“ zůstane v překladu nezměněné.

Více poskytovatelů TacoTranslate

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

Více o využívání origin naleznete zde.

Poskytovatelé TacoTranslate dědí nastavení od libovolného 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 jazykového nastavení

Kromě použití více poskytovatelů TacoTranslate, můžete také přepsat jak origin, tak locale 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ů chvíli trvat v závislosti na připojení uživatele. Můžete zobrazit indikátor načítání, který během přepínání poskytne vizuální zpětnou vazbu a tím zlepší uživatelský zážitek.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Pluralizace

Pro správné řešení pluralizace a zobrazování popisků podle počtu v různých jazycích se za nejlepší praxi považuje 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)}}
		/>
	);
}

Více jazyků

Chcete-li v jedné aplikaci současně podporovat více jazyků, můžete použít více poskytovatelů TacoTranslate s různými locale hodnotami, jak je uvedeno 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í ID překladů

Můžete přidat id ke komponentě Translate, abyste mohli řešit různé překlady nebo významy téhož textu. To je zvláště užitečné, když stejný text vyžaduje různé překlady v závislosti na kontextu. Přiřazením unikátních ID zajistíte, že každý výskyt textu bude přeložen 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 přihlášení v hlavičce může být přeloženo jako “Iniciar sesión” a přihlášení v patičce jako “Acceder” ve španělštině.

Doporučené postupy