Dokumentace: Pokročilé použití

Pokročilé použití

Czech

Práce s jazyky se zápisem zprava doleva

TacoTranslate usnadňuje podporu jazyků, které se čtou zprava doleva (RTL), jako je arabština a hebrejština, ve vašich aplikacích React. Správné zpracování jazyků RTL 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 určitých částí řetězce nebo zajistit, aby byly některé úseky zachová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, technický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 zůstane slovo “TacoTranslate” v překladu beze změny.

Více poskytovatelů TacoTranslate

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

O využívání origin se můžete dozvědět více 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" />
		</>
	);
}

Zacházení s načítáním

Při změně jazyka na straně klienta 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í, abyste zlepšili uživatelský zážitek a poskytli při přepínání vizuální zpětnou vazbu.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Pluralizace

Pro správné zvládnutí plurálu a zobrazení popisků závislých na počtu v různých jazycích je toto považováno za doporučený 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)}}
		/>
	);
}

Více jazyků

Pro podporu více jazyků současně v téže aplikaci 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 řešili různé překlady nebo významy 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řazením 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 přihlášení v hlavičce se může přeložit jako “Iniciar sesión” a přihlášení v patičce se může přeložit jako “Acceder” ve španělštině.

Doporučené postupy