Документация: Разширено използване

Разширено използване

Bulgarian

Обработка на езици, написани отдясно наляво

TacoTranslate улеснява поддръжката на езици, които се четат от дясно наляво (RTL), като арабски и иврит, във вашите React приложения. Правилната обработка на RTL езици гарантира, че вашето съдържание се показва правилно за потребители, които четат отдясно наляво.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Можете също да използвате предоставената функция isRightToLeftLocaleCode за проверка на текущия език извън React.

import {isRightToLeftLocaleCode} from 'tacotranslate';

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

Деактивиране на превода

За да деактивирате превода за определени части от низ или за да гарантирате, че определени сегменти се запазват без промяна, можете да използвате тройни квадратни скоби. Тази функционалност е полезна за запазване на оригиналния формат на имена, технически термини или друго съдържание, което не трябва да се превежда.

import {Translate} from 'tacotranslate/react';

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

В този пример думата „TacoTranslate“ ще остане непроменена в превода.

Множество доставчици на TacoTranslate

Ние силно препоръчваме използването на няколко TacoTranslate доставчика във вашето приложение. Това е полезно за организиране на вашите преводи и низове в различни източници, като например заглавната част, долния колонтитул или конкретни секции.

Можете да прочетете повече за използването на origins тук.

Провайдерите на TacoTranslate наследяват настройките от всеки родителски провайдер, така че няма да се налага да повтаряте други настройки.

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

Замяна на origin или locale

В допълнение към използването на множество TacoTranslate доставчици, можете също така да презапишете както origin, така и locale на нивата на Translate компонента и useTranslation hook.

import {Translate, useTranslation} from 'tacotranslate/react';

function Greeting() {
	const spanishHello = useTranslation('Hello!', {locale: 'es'});

	return (
		<>
			{spanishHello}
			<Translate string="What’s up?" origin="greeting" />
		</>
	);
}

Обработка на зареждане

Когато сменяте езиците от страна на клиента, изтеглянето на преводите може да отнеме няколко момента в зависимост от връзката на потребителя. Можете да покажете индикатор за зареждане, за да подобрите потребителското изживяване, като предоставите визуална обратна връзка по време на смяната.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Множествено число

За правилното обработване на множественото число и показване на етикети, базирани на брой, на различни езици, това се счита за най-добра практика:

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

Няколко езика

За да поддържате няколко езика едновременно в едно и също приложение, можете да използвате няколко доставчика на TacoTranslate с различни стойности на locale както е показано по-долу:

Можете също да презапишете locale на ниво компонент или hook.

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

Използване на translation IDs

Можете да добавите id към Translate компонента, за да управлявате различни преводи или значения на един и същ низ. Това е особено полезно, когато същият текст изисква различни преводи в зависимост от контекста. Като присвоявате уникални идентификатори, осигурявате всеки екземпляр на низа да бъде преведен точно според неговото специфично значение.

import {Translate} from 'tacotranslate/react';

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

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

Например, логинът в хедъра може да се преведе като „Iniciar sesión“, а логинът във футъра може да се преведе като „Acceder“ на испански.

Най-добри практики