Dokumentace: Pokročilé použití

Pokročilé použití

Czech

Práce s jazyky zapisovanými zprava doleva

TacoTranslate usnadňuje podporu jazyků se zápisem zprava doleva (RTL), jako jsou arabština a hebrejština, ve vašich aplikacích React. Správné zpracování RTL jazyků zajišťuje, že váš obsah bude správně zobrazen 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';
	// ...
}

Zakázání překladu

Chcete-li zakázat překlad konkrétních částí řetězce nebo zajistit, aby byly určité části 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, 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 nezměněno.

Více poskytovatelů TacoTranslate

Důrazně doporučujeme používat ve vaší aplikaci více poskytovatelů TacoTranslate. Pomáhá to organizovat překlady a textové řetězce do různých částí, například hlavičky, patičky nebo konkrétních sekcí.

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

Poskytovatelé TacoTranslate přebírají nastavení od 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 poskytovatelů TacoTranslate 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ů. Můžete zobrazit indikátor načítání, abyste zlepšili uživatelský zážitek poskytnutím vizuální zpětné vazby během přepínání.

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ů založených na počtu v různých jazycích se toto považuje za osvědč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ů

Chcete-li ve stejné aplikaci podporovat více jazyků současně, 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žívání ID překladů

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řazením jedinečných ID zajistíte, že každá instance tohoto ř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 ve španělštině může přeložit jako “Iniciar sesión” a přihlášení v patičce jako “Acceder”.

Doporučené postupy